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

Media queries

CSS properties for responsive layout

From best to worst.

Rating Property Explanations Link
★★★ @media screen A CSS media type property very useful if your HTML is well formated since most CSS are done for screen disply only, when this boolean property is false it is the under lying basic HTML that will render the content. Making it as eazy to read printed documents as if it was a PDF. ⌝
★★★ @media print A CSS media type property that is useful to debug style issues on printer devices. ⌝
★★★ (min-width/max-width: *px) The basic media query to use, the saffer. It gets the job done. ⌝
★★☆ (min-resolution: *dpi) The official W3C approved property that rely on dpi units used to refer to PPI (Pixels Per Inch). ⚠ This property is NOT supported by Safari browsers! ⌝
★★☆ (orientation: portrait/landscape) A standard boolean property usefull for mobile devices (only), allowing to fix granular layout issues. The only options are either portrait or landscape. ⌝
★★☆ @media(pointer: fine/coarse) This media query allows you to detect whether the device has a precise pointing device (mouse device = fine) or not (touchscreen = coarse), which can influence the user interface design. ⌝
★☆☆ (-webkit-min-device-pixel-ratio: *) A non-standard boolean property for both Google Chrome and Apple Safari (mobile and regular) browsers. It rely on absolute values. ⚠ They only reason we still use this property is beacause Safari browsers does NOT support the min-resolution as approved by W3C. So you should always duplicate your values in both (1st) -webkit-min-device-pixel-ratio then cascade down to min-resolution. Test your device⌝ ⌝
★☆☆ (aspect-ratio: *) Detect mobile device orientation, either horizontal or vertical. It rely on absolute values. ⚠ You should rely on orientation if you only need boolean result. ⌝
☆☆☆ (min-device-width: *px) 🚫 Obsolete! Developers should use the min-width media feature instead. ⌝

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.

Implicitly the mobile first design approach implies the use of minimal values (min-width) ​​in our CSS.

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

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

/* LAPTOPS with touchscreen feature enable */
@media screen and (min-width: 1024px) and (pointer: coarse) { … }
/* LAPTOPS without touchscreen feature */
@media screen and (min-width: 1024px) and (pointer: fine) { … }

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

/* LARGE DESKTOPS */
@media screen and (min-width: 1800px) { … }

/* PRINTERS */
@media print { … }

Device's display specifications

Test your device's pixel density⌝

Device Resolution (px) Browser viewport (px) PPI Resolution
🖥 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 1.5
💻 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

Television specifications

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

⚠ Do not rely on resolution values alone!

For displaying contents within web browsers we rely ONLY on the viewport values. Not the screen resolution specifications of the device itself. Because the resolution does not directly reflect the physical size of the screen. A device may have a high resolution but a small screen, making content difficult to read based on resolution alone.

@media (-webkit-device-pixel-ratio)

The -webkit-device-pixel-ratio is a non-standard boolean CSS media feature which is an alternative to the standard resolution media feature.

@media (resolution)

The resolution CSS media feature can be used to test the pixel density of the output device. ⚠ This property is NOT supported by Safari browsers

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) { 
  /* 4K/UHD/Retina devices */
}

Breakpoint helper for developers and QA

References: