嵌套媒体查询
嵌套媒体查询
提问于 2013-04-20 05:48:10
默认情况下，我想给我的body元素一个绿色的边框。在支持视网膜显示的设备上，我想先检查大小。在ipad上，我想给我的身体加一个红色边框，在iphone上，我想给它加一个蓝色边框。但是像这样嵌套媒体查询是行不通的：
body { border: 1px solid green; }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
@media (max-width: 768px) and (min-width: 320px) {
body { border: 1px solid red; }
}
@media (max-width: 320px) {
body { border: 1px solid blue; }
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2013-04-20 05:58:18
不是的。您需要使用and运算符，并将其编写为两个查询。但是，您可以在SCSS中执行此操作，SCSS将编译为CSS，但它将通过展开它们并使用and运算符将它们组合在一起。
这是一个常见的问题，一旦我第一次写LESS或SCSS，我就再也不想写这么长的东西了。
冗长的CSS：
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) and (min-width: 320px),
(min-resolution: 192dpi) and (max-width: 768px) and (min-width: 320px) {
body {
border: 1px solid red;
}
}
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 320px),
(min-resolution: 192dpi) and (max-width: 320px) {
body {
border: 1px solid blue;
}
}嵌套查询可能会起作用，但支持因浏览器而异。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16114000
复制相关文章
相似问题