css - 指定多个 -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio css 媒体查询

Question

需要能够为不同的设备像素比值指定不同的 css。如何做到这一点

例如，

0 <= range 1 <= 1
1 <  range 2 <= 1.5
1.5 <  range 3 <= 2.0
2.0 < range 4

示例媒体查询看起来像

>     @media (-webkit-max-device-pixel-ratio:1.0) {
>         .fontCls {
>             color: #FF00FF; // pink
>             font-size: 20px;
>             text-decoration: overline;
>         }
>     }
>     
>     @media (-webkit-min-device-pixel-ratio:1.0) and (-webkit-max-device-pixel-ratio:1.4) {
>         .fontCls {
>             color: #FF00FF; // pink
>             font-size: 16px;
>             text-decoration: line-through;
>         }
>     }
>     
>     @media (-webkit-min-device-pixel-ratio:1.5) and (-webkit-max-device-pixel-ratio:1.9) {
>         .fontCls {
>             color: #FF00FF; // pink
>             font-size: 16px;
>             text-decoration: underline;
>         }
>     }
>     
>     @media (-webkit-min-device-pixel-ratio:2.0) {
>         .fontCls {
>            color: #FF00FF; // pink
>             font-size: 16px;
>             font-weight: bold;
>         }
>     }

Answer 1

您可以使用链接标签执行此操作，如下所示。将 href 更改为目标特定 CSS 的正确路径

<link rel='stylesheet' href='ss1.css' media='only screen and (-webkit-max-device-pixel-ratio: 1)'/>

<link rel='stylesheet' href='ss2.css' media='only screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio: 1.4)'/>

<link rel='stylesheet' href='ss3.css' media='only screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9)'/>

<link rel='stylesheet' href='ss4.css' media='only screen and (-webkit-min-device-pixel-ratio: 2)'/>