html - 为视网膜显示器设置特定样式表

Question

我正在寻找一种方法来设置不同的样式表，具体取决于用户设备是非视网膜还是视网膜。我遇到了很多不同的方法，所以现在我不知道该做什么。尽管在我看来，这似乎更容易，更有效：

<link rel="stylesheet" href="myCss.css" media="screen and min-device-pixel-ratio: 2">

但我不确定它是最新的语法，这是否适用于所有现代浏览器（包括 ie9），有没有办法改进这种方法？

Answer 1

在您现有的样式表中

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

从

CSS 技巧

Answer 2

您使用标签中的media属性的方法link是一个好的开始。虽然我建议使用media query可以直接在.css.

http://www.w3.org/TR/css3-mediaqueries/

你可以这样做：

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2){
    /* The retina stuff here */
    }

进一步阅读：http ://menacingcloud.com/?c=highPixelDensityDisplays