CODEWITHSUNDEEP
csshtmlmobilemedia-queries
user974737
user974737

Reputation: 11

Specifying multiple -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio css media queries

Need ability to specify different css for different device-pixel-ratio values. How can this be done

For example,

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

Example media query looks like

>     @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;
>         }
>     }

Upvotes: 1

Views: 5058

Answers (1)

user796446
user796446

Reputation:

You can do this with the link tag as shown below. Change the href to the correct path of your target specific 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)'/>

Upvotes: 2

Related Questions