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

参见英文答案 > Using Sass Variables with CSS3 Media Queries                                    5个
我正在尝试为具有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％,所以它似乎采用了错误的样式.为什么会这样？

解决方法:

好吧似乎问题可能不在于媒体查询本身,而是因为无法在媒体查询中更新Sass变量,如此其他Stackoverflow question中所述.

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

因此,我将尝试重新编写代码,以避免在媒体查询中更改变量.

标签：android,css,ios,sass,media-queries
来源： https://codeday.me/bug/20190829/1760397.html