指定多個-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)'/>