Question

我希望有2个不同的css文件，一个用于 window.devicePixelRatio ＆lt; = 1，一个用于高dpi设备。

如何使用JavaScript选择css？

到目前为止我做了什么（不工作）：

＆＃13;

<head>
  <script>
if (window.devicePixelRatio <= 1) {
    <!--alert('window.devicePixelRatio = ' + window.devicePixelRatio);-->
    <link href="style.css" rel="stylesheet" type="text/css" />;
        } else {
    <link href="stylemobi.css" rel="stylesheet" type="text/css" />;
}
</script>
  </head>

＆＃13;

Answer 1

使用一个链接标记并为其提供一个ID，然后将脚本设置为href

char* readfile (char* fileName){
  char* contents;
  FILE* fp;
  fp = fopen(fileName,"r");
  while(getc(fp) != EOF){
    contents = getc(fp);
    *contents++;
  }    
return contents;
}

等待任何后来做这件事意味着一些奇怪的造型，而身体加载

Answer 2

我不太确定但是怎么样，

<head>
 <link id="theCSS" href="" rel="stylesheet" type="text/css" />
<script>
    if (window.devicePixelRatio <= 1) {
          document.getElementById('theCSS').href= "style.css";
        } else {
         document.getElementById('theCSS').href= "stylemobi.css";
     }
</script>
</head>

更新： - 添加说明 - ＆gt;为css <link>元素提供了一个id，并使用document.getElementById()在js中抓取它，并根据您的条件将其href分配给您想要的任何css

Answer 3

感谢您的回答！我现在使用这种方法，在单个css文件中使用不同的css样式，根据显示ppi自动选择。

body {
    margin: 0;
    padding: 0;
    /*background-color:#008B09;*/
    background-image:url("purty_wood.jpg");
    background-color:#008B09;
    font-family: 'ABeeZee', sans-serif;
    color:#000000;
    overflow:auto;
    font-size:1.2em;
}


@media (-webkit-min-device-pixel-ratio: 2), 
    (min-resolution: 192dpi) {
        body {
            font-size:2em;
        }
    }

在这种情况下，如果分辨率超过192ppi或者dp-ratio超过2，浏览器会自动覆盖标准css。因此，在单个css文件中，我可以为不同的显示设置不同的设置！

（我只需要将分辨率设置为最低235，因为一些mac显示器的最高分辨率为230 ppi，大多数智能手机的分辨率至少为250ppi。）

更多信息：https://css-tricks.com/snippets/css/retina-display-media-query/

如何使用JavaScript选择css文件？

3 个答案: