参见英文答案 > 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)发生在客户端.”
因此,我将尝试重新编写代码,以避免在媒体查询中更改变量.
原文地址:https://codeday.me/bug/20190829/1760397.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。