css • Responsive media queries and pixels

Media queries

CSS properties

1. min-width/max-width is the basic media query to use. It gets the job done.
2. min-resolution is the official W3C approved property that rely on dpi units used to refer to PPI (Pixels Per Inch).
3. -webkit-min-device-pixel-ratio is a non-standard property for both Google Chrome and Apple Safari (mobile and regular) browsers. It rely on absolute values.
4. orientation is usefull for mobile devices (only), allowing to fix granular layout issues. Options are either portrait or landscape.

As of the this Screen Resolutions Market Share the common large computer screens size to target would be the 1920 x 1080 of 1080i HDTVs.

Mobile first:

/* Phones */
@media screen and (min-device-width: 320px) { … }
@media screen and (min-device-width: 600px) and (orientation: landscape) { … }

/* Tablets */
@media screen and (min-device-width: 800px) and (orientation: portrait) { … }
@media screen and (min-device-width: 1024px) and (orientation: landscape) { … }

/* Laptops */
@media screen and (min-device-width: 1024px) { … }

/* Desktops */
@media screen and (min-device-width: 1200px) { … }

/* Large desktops */
@media screen and (min-device-width: 1800px) { … }

/* Printers */
@media print { … }

Viewport sizes by device

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* 4K/UHD/Retina specific stuff here */
}

Device	Resolution (px)	Browser viewport (px)	PPI	Pixel ratio
🖥 UHD 8K	7680 × 4320
🖥 32in Pro XDR Display (Retina 6K)	6016 x 3384
🖥 32in iMac Pro 5K (UHD+)	5120 × 2880
🖥 27in UHD 4K LG monitor	3840 x 2160	1860	~140dpi	~2
💻 16in Macbook Pro	3072 x 1920	1536	226dpi	2.26
💻 13in Macbook Air	2560 x 1600	1280	113dpi	2
iPad Air 4 (2020)	1640 x 2360	820 x 1180	264dpi	2
iPad Mini	1536 x 2048	768 x 1024	324dpi	2
iPhone 12 Pro Max	1284 x 2778	428 x 926	458dpi	3
iPhone 12	1170 x 2532	390 x 844	460dpi	3
iPhone 12 Mini	1080 x 2340	360 x 780	476dpi	3
iPhone SE (2020)	750 x 1334	375 x 667	326dpi	2
Pixel 4 XL	1440 x 3040	412 x 869	537dpi	3.5
Pixel 5	1080 x 2340	393 x 851	432dpi	2.75
Pixel 2	-	412 x 732	-	2.625

For displaying contents within web browsers we rely ONLY on the viewport values. Not the physical screen resolution of the device itself.

TV standards	Resolution (px)	PPI
📺 UHD 4K	3840 x 2160	~140dpi
📺 HDTV 1080i	1920 x 1080	72dpi
📺 HDTV 720p	1280 x 720	72dpi
📺 TV 480p	640 x 480	72dpi

References:

• Designer's guide to DPI by Sébastien Gabriel.
• YesViz.com
• Wikipedia's Computer display standard.