How to achieve landscape and pixel media using a breakpoint

Question

How to achieve this media query using sass breakpoint? ...

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

I tried this, but it affects the desktop version too ...

 $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

Here's how to achieve what you want with a breakpoint (checkpoint package). I tried it in chrome (and simulate a device using web development tools) and it works.

 // 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; } } 

If the breakpoint seems too complicated, you can achieve this with your own code. For instance:

 // 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; } }