css • Responsive media queries and pixels - martindubenet/wed-dev-design GitHub Wiki

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 for high pixel ration

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-min--moz-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {
  /* high pixel density devices */
}

Viewport sizes by device

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-min--moz-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) { 
  /* 4K/UHD/Retina devices */
}
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 3200 x 1800
🖥 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
Tablet iPad Air 4 (2020) 1640 x 2360 820 x 1180 264dpi 2
Tablet iPad Mini 1536 x 2048 768 x 1024 324dpi 2
Tablet Pixel C (2015) 2560 x 1800 1280 x 900 308dpi 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: