Задание нескольких медиа-запросов css -webkit-min-device-pixel-ratio и -webkit-max-device-pixel-ratio

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)'/>