5

How to achieve this media query with 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've tried this, but it affects the desktop version as well ...

$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) {
}
Ruby
  • 2,207
  • 12
  • 42
  • 71

1 Answers1

3

This is how to achieve what you want with breakpoint sass (breakpoint-sass bower package). I have tried it in chrome (and simulate device with web developper 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 breakpoint seems too complicated, You can achieve this with your own code. For example :

// 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;
    }
}
rdhainaut
  • 2,659
  • 1
  • 24
  • 34
  • Nope, that doesn't work, the first one using breakpoint doesn't target the landscape for mobile only, it targets every mobile and tablet. The second solution doesn't compile using gulp-sass. But when using the media query as is it works fine, I just want to use a shortcut for this media query, that's it, so I'm asking how to use breakpoint to achieve this shortcut. – Ruby Feb 01 '17 at 13:27
  • The mixin solution seems to work by the way, but I'm just scratching my head, how to do it with breakpoint? There must be away. – Ruby Feb 01 '17 at 13:31