Media queries targeting the screen SIZE?

HTML & CSS
1

I want to create separate layouts for small vs big screens. Nowadays smartphones come with very high resolutions so counting on pixels won’t cut it. Is there a way to know screen size in inches and style accordingly?

Thanks

2

Actually, they do cut it, because those phones still act as if they were smaller. That is, even though the iPhone has far more px than 320 horizontally, it still respects rules for that width (or acts as if it is 320px wide). So you can still use settings like these:

(I’m not using the right terminology here, but hopefully you get the idea.)

3

You can’t test for screen size using media queries. You can only test for viewport size (which is only the same thing when the browser displays the web page using the entire screen with no space taken up with browser controls or anything wlse).