根据一篇关于CSS-Tricks的文章,未来的视网膜显示媒体查询可以写成:
@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 */
}
Run Code Online (Sandbox Code Playgroud)
如果我想为非视网膜显示器编写CSS代码怎么办?
我知道您可以先为非视网膜显示器编写一些CSS代码,然后使用上述媒体查询覆盖视网膜显示.但有没有专门针对非视网膜显示的媒体查询?
小智 7
这篇文章也是关于CSS-Tricks的,它指出你可以不用反转逻辑.所以在理论上:
@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 */
}
Run Code Online (Sandbox Code Playgroud)