Hi folks, this table will help you while designing or creating website html pages with different screen resolutions when you using css media queries like “@media screen and (max-width:1024px), @media screen and (device-aspect-ratio: 16/9) etc “. Some example are given below.
Below css rule checking with maximum width of device and apply margin.
@media screen and (max-width:1024px){ .container { margin:0 20px; } @media screen and (max-width:1152px){ .container { margin:0 50px; } }
if a screen device with square pixels has 1280 horizontal pixels and 720 vertical pixels (commonly referred to as “16:9”), the following Media Queries will all match the device:
@media screen and (device-aspect-ratio: 16/9) { … } @media screen and (device-aspect-ratio: 32/18) { … } @media screen and (device-aspect-ratio: 1280/720) { … } @media screen and (device-aspect-ratio: 2560/1440) { … }
Acronym | Aspect ratio | Width (px) | Height (px) | % of Steam users | % of web users |
---|---|---|---|---|---|
VGA | 4:3 | 640 | 480 | 00.02 | n/a |
3:4 | 768 | 1024 | n/a | 01.93 | |
SVGA | 4:3 | 800 | 600 | 00.17 | 01.03 |
WSVGA | 17:10 | 1024 | 600 | 00.31 | 02.25 |
XGA | 4:3 | 1024 | 768 | 05.53 | 18.69 |
16:9 | 1093 | 614 | n/a | 00.63 | |
XGA+ | 4:3 | 1152 | 864 | 00.87 | 01.55 |
WXGA | 16:9 | 1280 | 720 | 01.51 | 01.54 |
WXGA | 5:3 | 1280 | 768 | n/a | 01.54 |
WXGA | 16:10 | 1280 | 800 | 04.25 | 12.97 |
SXGA– (UVGA) | 4:3 | 1280 | 960 | 00.72 | 00.72 |
SXGA | 5:4 | 1280 | 1024 | 10.66 | 07.49 |
~16:9 | 1311 | 737 | n/a | 00.35 | |
HD | ~16:9 | 1360 | 768 | 02.36 | 02.28 |
HD | ~16:9 | 1366 | 768 | 17.19 | 19.14 |
SXGA+ | 4:3 | 1400 | 1050 | 00.18 | n/a |
WXGA+ | 16:10 | 1440 | 900 | 07.60 | 06.61 |
HD+ | 16:9 | 1600 | 900 | 06.82 | 03.82 |
UXGA | 4:3 | 1600 | 1200 | 00.53 | n/a |
WSXGA+ | 16:10 | 1680 | 1050 | 10.26 | 03.66 |
FHD | 16:9 | 1920 | 1080 | 25.04 | 05.09 |
WUXGA | 16:10 | 1920 | 1200 | 03.65 | 01.11 |
QWXGA | 16:9 | 2048 | 1152 | 00.13 | n/a |
WQHD | 16:9 | 2560 | 1440 | 00.72 | 00.36 |
WQXGA | 16:10 | 2560 | 1600 | 00.19 | n/a |
Other | 01.29 | 07.25 |