css • Responsive media queries and pixels - martindubenet/wed-dev-design GitHub Wiki
Media queries
CSS properties
min-width
/max-width
is the basic media query to use. It gets the job done.min-resolution
is the official W3C approved property that rely on dpi units used to refer to PPI (Pixels Per Inch).-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.orientation
is usefull for mobile devices (only), allowing to fix granular layout issues. Options are eitherportrait
orlandscape
.
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:
- Designer's guide to DPI by Sébastien Gabriel.
- YesViz.com
- Wikipedia's Computer display standard.