Android 如何针对dppx大于2但小于3的设备

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

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

---

但是当我在iphone5s上运行web时（使用2dppx），我可以看到

基本字体大小等于180%，因此它似乎采用了错误的样式。为什么会这样？
我在这里可能完全错了，但我不认为您应该将
dppx
与
min设备像素比一起使用，您应该这样写：

@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%;
    }
}

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

@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%;
    }
}

请尝试使用
min分辨率，而不要使用
min设备像素比率

@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%;
    }
}

请参阅此处的资源部分：
好的，问题可能不在媒体查询本身，而是因为无法更新媒体查询中的Sass变量，如本另一节所述

从接受的答案中，我引用“这根本不可能。因为触发器@媒体屏幕和（最大宽度：1170px）发生在客户端。”

因此，我将尝试重新编写代码，以避免媒体查询中的变量发生变化。
看来您是对的！然而，我修改了我的代码，但没有任何变化，事实上，根据Chrome simulator，每个设备无论其分辨率如何，都采用最后的样式，并将$base字体大小设置为180%；出于好奇，当您完全取出包装介质查询（最大宽度：40em）并单独进行分辨率查询时会发生什么？同样的结果@我想，同样的结果，我将编辑这个问题来反映that@ithil供应商前缀如何？尝试使用
-webkit min resolution
等。谢谢Jordan，请查看@David Wilkinson的评论answer@ithil为了好玩，你能试着使用-webkit-min设备像素比看看它是否有效吗？啊，我在那里也学到了一些新东西！谢谢。如果你的问题是另一个问题的副本，它应该作为副本关闭。将答案指向另一个答案是非常不合适的。
@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%;
    }
}