मैं मीडिया ब्रेकपॉइंट कैसे सेट करूं, आइए मध्यम से बड़े से कहें - क्या मैं न्यूनतम मिश्रण और अधिकतम मिश्रित घोंसला करता हूं या मैं इसे कैसे कर सकता हूं।बूटस्ट्रैप 4 - मीडिया क्वेरी मिक्सिन का उपयोग कैसे करें

आउटपुट जो मैं बाद में हूं, इस तरह कुछ है: @media (min-width: 480px) और (अधिकतम-चौड़ाई: 767 पीएक्स) ब्रेकपॉइंट मिश्रण का उपयोग कर।

2015-09-13 user1678736

आप दो कक्षाओं का एक कॉम्बो करते हैं। (इसके अलावा BS4 अब Rems का उपयोग करता है नहीं px।)

उदाहरण ... (से: http://codepen.io/j_holtslander/pen/jbEGWb)

<!-- Jay's Viewport Helper --> 
<div style="position:fixed;top:0;left:0;background-color:rgba(0,0,0,0.5);padding:10px;color:#fff;"> 
    <span class="hidden-sm-up">SIZE XS</span> 
    <span class="hidden-xs-down hidden-md-up">SIZE SM</span> 
    <span class="hidden-sm-down hidden-lg-up">SIZE MD</span> 
    <span class="hidden-md-down hidden-xl-up">SIZE LG</span> 
    <span class="hidden-lg-down">SIZE XL</span> 
</div> 
<!-- /Jay's Viewport Helper -->

स्रोत

2015-09-13 19:10:04 Jay

इस सवाल का जवाब नहीं है काम करना चाहिए। वह एक मीडिया क्वेरी में संकलित एक एससीएसएस फ़ाइल में मीडिया मिश्रण का उपयोग करना चाहता है। – Edd

उपयोग media-breakpoint-between($lower, $upper)

निर्भरता

mixins घोषित किये गए हैं mixins/_breakpoints.scss, और _variables.scss में मिले $ ग्रिड-ब्रेकपॉइंट्स मानचित्र पर निर्भर करता है।

उदाहरण

ब्रेकप्वाइंट नक्शा:

$grid-breakpoints: (
    xs: 0, 
    sm: 576px, 
    md: 768px, 
    lg: 992px, 
    xl: 1200px 
)

Mixin:

@include media-breakpoint-between(sm, md) { 
    // your code 
}

को संकलित

महत्वपूर्ण नोटिस

मीडिया-ब्रेकप्वाइंट के बीच mixin का उपयोग करता है 'कम' और 'ऊपरी' घोषित ब्रेकप्वाइंट के मूल्यों।

'कम' ब्रेकप्वाइंट का मूल्य $ ग्रिड ब्रेकप्वाइंट नक्शे में घोषित मूल्य है।
विशिष्ट ब्रेकपॉइंट का 'ऊपरी' मान उच्च ब्रेकपॉइंट शून्य 1px के मान के बराबर है।

ऊपरी & कम ब्रेकप्वाइंट मूल्यों उदाहरण (आधारित आयुध डिपो $ ग्रिड ब्रेकप्वाइंट नक्शा)

Lower value of md is equal to 576 
Upper value of md is equal to 991 (value of next breakpoint (lg) minus 1px (992px-1px)

अन्य मीडिया mixins

@include media-breakpoint-up(sm) {} की एक न्यूनतम-चौड़ाई के साथ एक ब्रेकपाइंट बनाता है $sm।

@include media-breakpoint-down(md) {}$md की अधिकतम चौड़ाई वाला ब्रेकपॉइंट बनाता है।

स्रोत

2016-05-27 14:21:24 Edd

यहाँ भी media-breakpoint-between($lower, $upper)

Mixin है तो यह

@include media-breakpoint-between(sm, md){ 
    // this applies only between the sm and ms breakpoints 
}

स्रोत

2016-06-16 06:46:53 ondrejruzicka

बूटस्ट्रैप 4 - मीडिया क्वेरी मिक्सिन का उपयोग कैसे करें

उत्तर

उदाहरण

संबंधित मुद्दे