如何实现带有sass断点的横向和像素配比媒体查询

Question

如何使用sass断点实现此媒体查询？

@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

这就是使用断点 sass（断点 sass bower 包）实现您想要的目标的方法。我已经在 chrome 中尝试过它（并使用 Web 开发人员工具模拟设备）并且它可以工作。

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