पूर्व या बाद के प्रसंस्करण के बिना CSS में एक ब्रेकप्वाइंट में परिभाषित ब्रेकप्वाइंट का उपयोग करने का कोई तरीका नहीं है। चूंकि हम प्रोसेसर को कोर में स्टाइल करने के लिए उपयोग नहीं करते हैं, इसलिए ब्रेकप्वाइंट अभी भी सीएसएस फाइलों में कठिन कोडित हैं। एक कस्टम थीम में, हालांकि आप गल्प या ग्रंट जैसे उपकरणों का उपयोग करने के लिए स्वतंत्र हैं और यह सैद्धांतिक रूप से आपके सीएसएस पीढ़ी के लिए ब्रेकप्वाइंट.आईएमएल इनपुट का उपयोग करना संभव होगा।
वर्तमान में breakpoints.yml मुख्य रूप से JavaScript (JS) के लिए दिलचस्प है। उदाहरण के लिए कोर में टूलबार मॉड्यूल को देखें। ब्रेकपॉइंट की जानकारी 'drupalSettings' JS ऑब्जेक्ट को 'src / Element / Toolbar.php' में जोड़ा जाता है:
$breakpoints = static::breakpointManager()->getBreakpointsByGroup('toolbar');
if (!empty($breakpoints)) {
$media_queries = array();
foreach ($breakpoints as $id => $breakpoint) {
$media_queries[$id] = $breakpoint->getMediaQuery();
}
$element['#attached']['drupalSettings']['toolbar']['breakpoints'] = $media_queries;
}
फिर जेएस में रन-टाइम सेटिंग्स जैसा कि ऊपर परिभाषित है, में पढ़ा जाता है।
var options = $.extend(
{
breakpoints: {
'toolbar.narrow': '',
'toolbar.standard': '',
'toolbar.wide': ''
}
},
drupalSettings.toolbar
);
बाद में एक ईवेंट श्रोता प्रति ब्रेकप्वाइंट में जोड़ा जाता है ताकि स्क्रीन आकार में परिवर्तन होने पर 'कुछ' किया जा सके।
for (var label in options.breakpoints) {
if (options.breakpoints.hasOwnProperty(label)) {
var mq = options.breakpoints[label];
var mql = Drupal.toolbar.mql[label] = window.matchMedia(mq);
mql.addListener(Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label));
}
}
एक परिवर्तन की स्थिति में प्रति ब्रेकपॉइंट पर विभिन्न क्रियाएं की जा सकती हैं।
Drupal.toolbar = {
mediaQueryChangeHandler: function (model, label, mql) {
switch (label) {
case 'toolbar.narrow':
model.set({
isOriented: mql.matches,
isTrayToggleVisible: false
});
break;
case 'toolbar.standard':
// Logic
break;
case 'toolbar.wide':
// Logic
break;
default:
break;
}
}
};
नोट : कोड उदाहरण Drupal Toolbar मॉड्यूल से लिया गया है और छीन लिया गया है। प्रेरणा के रूप में उपयोग करें, कार्यात्मक कोड के रूप में नहीं।
जेएस मीडियाक्वायरीज को सामान्य रूप से उपयोग करने के बारे में एक अच्छी व्याख्या यहां पाई जा सकती है: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries