ब्रेकपॉइंट्स को प्रबंधित करने के लिए मिक्सिन - सीएसएस-ट्रिक्स

उत्तरदायी वेब डिज़ाइन कृतियाँ अक्सर कई अलग-अलग विराम बिंदुओं पर मौजूद होती हैं। उन ब्रेकपॉइंट्स को प्रबंधित करना हमेशा आसान नहीं होता है। उनका उपयोग करना और उन्हें अपडेट करना कभी-कभी थकाऊ हो सकता है। इसलिए ब्रेकपॉइंट कॉन्फ़िगरेशन और उपयोग को संभालने के लिए एक मिश्रण की आवश्यकता है।

सरल संस्करण

पहले आपको नामों से संबंधित, ब्रेकपॉइंट का एक नक्शा चाहिए।

$breakpoints: ( 'small': 767px, 'medium': 992px, 'large': 1200px ) !default;

फिर, मिश्रण इस मानचित्र का उपयोग करेगा।

/// Mixin to manage responsive breakpoints /// @author Hugo Giraudel /// @param (String) $breakpoint - Breakpoint name /// @require $breakpoints @mixin respond-to($breakpoint) ( // If the key exists in the map @if map-has-key($breakpoints, $breakpoint) ( // Prints a media query based on the value @media (min-width: map-get($breakpoints, $breakpoint)) ( @content; ) ) // If the key doesn't exist in the map @else ( @warn "Unfortunately, no value could be retrieved from `#($breakpoint)`. " + "Available breakpoints are: #(map-keys($breakpoints))."; ) )

उपयोग:

.selector ( color: red; @include respond-to('small') ( color: blue; ) )

परिणाम:

.selector ( color: red; ) @media (min-width: 767px) ( .selector ( color: blue; ) )

उन्नत संस्करण

सरल संस्करण केवल min-widthमीडिया प्रश्नों का उपयोग करना संभव बनाता है । अधिक उन्नत प्रश्नों का उपयोग करने के लिए, हम अपने प्रारंभिक नक्शे और मिक्सिन को थोड़ा ट्विक कर सकते हैं।

$breakpoints: ( 'small': ( min-width: 767px ), 'medium': ( min-width: 992px ), 'large': ( min-width: 1200px ) ) !default;

/// Mixin to manage responsive breakpoints /// @author Hugo Giraudel /// @param (String) $breakpoint - Breakpoint name /// @require $breakpoints @mixin respond-to($breakpoint) ( // If the key exists in the map @if map-has-key($breakpoints, $breakpoint) ( // Prints a media query based on the value @media #(inspect(map-get($breakpoints, $breakpoint))) ( @content; ) ) // If the key doesn't exist in the map @else ( @warn "Unfortunately, no value could be retrieved from `#($breakpoint)`. " + "Available breakpoints are: #(map-keys($breakpoints))."; ) )

उपयोग:

.selector ( color: red; @include respond-to('small') ( color: blue; ) )

परिणाम:

.selector ( color: red; ) @media (min-width: 767px) ( .selector ( color: blue; ) )