默认情况下,我想给我的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; } } }
解决方法
不,你需要使用和操作符,并将其写为两个查询.然而,您可以在SCSS中执行此操作,它将编译为CSS,但它将通过展开它们并使用和运算符来组合它们.
这是一个常见的问题,一旦我第一次写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; } }
原文地址:https://www.jb51.cc/css/217180.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。