Tag Archives: resolutions

Most common computer display resolutions in the first half of 2012

screen-resolutions

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) { … }
Most common display resolutions in the first half of 2012
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
Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]