默认情况下,我想给我的 body 元素一个绿色边框。在支持视网膜显示的设备上,我想先检查尺寸。在 ipad 上我想给我的 body 一个红色边框,在 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; }
}
}
最佳答案
没有。您需要使用 和
运算符并将其编写为两个查询。但是,您可以在 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;
}
}
嵌套查询可能有效,但支持因浏览器而异。
关于css - 嵌套媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16114000/