Question

我尝试为具有2dppx像素比的设备应用一些css规则，而对于具有3dppx或更高的设备则尝试应用其他一些css规则。

由于我只针对小型设备（手机和平板电脑，但没有视网膜笔记本电脑或电视），我有一个围绕其他两个的最大宽度媒体查询。（编辑：删除此媒体查询并不能解决问题）。

@media only screen and (max-width: 40em) {

    @media screen and (min-device-pixel-ratio: 2dppx) and (max-device-pixel-ratio: 2.9dppx){
        $base-font-size: 150%;
    }
    @media screen and (min-device-pixel-ratio: 3dppx) {
        $base-font-size: 180%;
    }
}

但是当我在iPhone 5s（带有2dppx）上运行网页时，我可以看到base-font-size等于180％，所以它似乎采取了错误的风格。为什么会这样？

Answer 1

我可能在这里完全错了，但我不相信你应该dppx使用min-device-pixel-ratio，你应该把它写成：

@media only screen and (max-width: 40em) {

    @media screen and (min-device-pixel-ratio: 2) and (max-device-pixel-ratio: 2.9){
        $base-font-size: 150%;
    }
    @media screen and (min-device-pixel-ratio: 3) {
        $base-font-size: 180%;
    }
}

或者，为了更明确，请尝试使用resolution属性：

@media only screen and (max-width: 40em) {

    @media screen and (min-resolution: 2dppx) and (max-resolution: 2.9dppx){
        $base-font-size: 150%;
    }
    @media screen and (min-resolution: 3dppx) {
        $base-font-size: 180%;
    }
}

编辑：您可能需要附加供应商前缀，如下所示：

@media only screen and (max-width: 40em) {

    @media screen and (min-resolution: 2dppx) and (max-resolution: 2.9dppx), screen and (-webkit-min-resolution: 2dppx) and (-webkit-max-resolution: 2.9dppx){
        $base-font-size: 150%;
    }
    @media screen and (min-resolution: 3dppx), screen and (-webkit-min-resolution: 3dppx) {
        $base-font-size: 180%;
    }
}

Answer 2

好吧似乎问题可能不在于媒体查询本身，而在于无法更新媒体查询中的Sass变量这一事实，如另一个Stackoverflow question中所述。

从接受的答案中，我引用“这根本不可能。因为触发器@media屏幕和（max-width：1170px）发生在客户端。”。

所以我会尝试重新编写代码，以避免在媒体查询中更改变量。

Answer 3

请尝试使用min-device-pixel-ratio。

，而不是使用min-resolution

@media only screen and (max-width: 40em) {

    @media screen and (min-resolution: 2dppx) and (max-resolution: 2.9dppx){
        $base-font-size: 150%;
    }
    @media screen and (min-resolution: 3dppx) {
        $base-font-size: 180%;
    }
}

请参阅此处的资源部分：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

如何定位dppx大于2但小于3的设备

3 个答案: