सास-ब्रेकपॉइंट

Question

के साथ परिदृश्य और पिक्सेल राशन मीडिया क्वेरी कैसे प्राप्त करें सास ब्रेकपॉइंट के साथ इस मीडिया क्वेरी को कैसे प्राप्त करें? ...

@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) 

मैं इस की कोशिश की है, लेकिन यह रूप में अच्छी तरह डेस्कटॉप संस्करण को प्रभावित करता है ...

$mobileLandscape: screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape); 

@include breakpoint($mobileLandscape) { 
} 

Answer 1

इस लक्ष्य को हासिल करने के लिए कैसे क्या आप ब्रेकप्वाइंट सास के साथ चाहते हैं (ब्रेकप्वाइंट-सास बोवर पैकेज)। मैंने क्रोम में कोशिश की है (और वेब डेवलपर टूल के साथ डिवाइस अनुकरण) और यह काम करता है।

// With third-party tool 
// Breakpoint https://github.com/at-import/breakpoint 
// You can find installation instructions here https://github.com/at-import/breakpoint/wiki/Installation 
$mobile-landscape-breakpoint: 'only screen' 375px 667px, (-webkit-min-device-pixel-ratio 2), (orientation landscape); 

body { 
    @include breakpoint($mobile-landscape-breakpoint) { 
     color: blue; 
    } 
} 

यदि ब्रेकपॉइंट बहुत जटिल लगता है, तो आप इसे अपने कोड से प्राप्त कर सकते हैं। उदाहरण के लिए:

// With Variable 
$mobileLandscape: "only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)"; 

@media #{$mobileLandscape} { 
    body { 
     color: red; 
    } 
} 

// With Mixin 
@mixin mq($breakpoint){ 
    @if $breakpoint == "mobile-landscape"{ 
     @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){ 
      @content; 
     } 
    } 
} 

body{ 
    @include mq("mobile-landscape"){ 
     color: green; 
    } 
}