根据关于 CSS 技巧的文章 https://css-tricks.com/snippets/css/retina-display-media-query/，面向未来的视网膜显示媒体查询可以写为：
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Retina-specific stuff here */
}
如果我想为非视网膜显示编写 CSS 代码怎么办？
我知道你可以先为非视网膜显示编写一些CSS代码，然后用上面的媒体查询覆盖它以用于视网膜显示。但是有没有专门针对非视网膜显示的媒体查询？
本文 https://css-tricks.com/logic-in-media-queries/，也在 CSS-Tricks 上，指出您可以使用 not 反转逻辑。所以理论上：
@media
not screen and (-webkit-min-device-pixel-ratio: 2),
not screen and ( min--moz-device-pixel-ratio: 2),
not screen and ( -o-min-device-pixel-ratio: 2/1),
not screen and ( min-device-pixel-ratio: 2),
not screen and ( min-resolution: 192dpi),
not screen and ( min-resolution: 2dppx) {
/* non-Retina-specific stuff here */
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
