Adaptation of CSS depending of screen resolution and size of screen

user_9359338 0
Viewed 125

Currently working for a client which ask to adapt interfaces on two different screen which have a resolution of 2560x1600.

The problem is that theses both screen have the same resolution but not the same screen diagonal. Indeed, one got a 27" diagonal and the other one... 9".

So it's pratically impossible to read elements on the 9", that's the reason why I need to adapt the elements on this specific screen.

Initially I was think about using DPR (device pixel ratio) which I supposed aren't not the same... But it's not. Both of theses have 1 DRP.

So I not able to use CSS media query rule.

@media (min-width: 2560px) and (-webkit-min-device-pixel-ratio: 2.5) { ... }

Anyone have an idea ?

Thanks

css html
2 Answers
user_35599110

When working with responsive html and css, don't bother with DPR.

@media (min-width: 2560px) { ... }
@media (min-width: 1980px) { ... }

You can use min-width for a mobile first responsive design or a max-width for a desktop first responsive design:

@media (max-width: 2560px) { ... }
@media (max-width: 1980px) { ... }

Recommended responsive steps are 1200px, 992px, 768px and 576px. And of course you need the viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1">

user_138178840
Related