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

需要具有为不同的设备像素比率值指定不同的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;
>         }
>     }

最佳答案

您可以使用链接标记执行此操作，如下所示。将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)'/>