We are living as nomad in Georgia !!

[CSS] Set up media queries for various device widths

In order to make a responsive design, we need to consider what media query would be better.

There are many kind of devices and have different size. So "noknow" introduces our best practice for mobile first and PC first media query.

Contents

In conclusions noknow would recommend

noknow would recommend designs as follows:

For mobile first

css

{
    /* Smart phone (portrait) */
}
@media screen and (min-width: 481px) {
    /* Smart phone (landscape) */
}
@media screen and (min-width: 769px) {
    /* Tablet */
}
@media screen and (min-width: 1025px) {
    /* PC */
}

For PC first

css

{
    /* PC */
}
@media screen and (max-width: 1024px) {
    /* Tablet */
}
@media screen and (max-width: 768px) {
    /* Smart phone (landscape) */
}
@media screen and (max-width: 480px) {
    /* Smart phone (portrait) */
}

Device list

Device width x height (px) resolution (px) density type
Apple iPhone 5320 x 568640 x 11362.0smartphone
Apple iPhone 5S320 x 568640 x 11362.0smartphone
Apple iPhone SE320 x 568640 x 11362.0smartphone
Apple iPhone 6375 x 667750 x 13342.0smartphone
Apple iPhone 6S375 x 667750 x 13342.0smartphone
Apple iPhone 7375 x 667750 x 13342.0smartphone
Apple iPhone 8375 x 667750 x 13342.0smartphone
Apple iPhone 6 Plus414 x 7361080 x 19202.608smartphone
Apple iPhone 6S Plus414 x 7361080 x 19202.608smartphone
Apple iPhone 7 Plus414 x 7361080 x 19202.608smartphone
Apple iPhone 8 Plus414 x 7361080 x 19202.608smartphone
Apple iPhone X375 x 8121125 x 24363.0smartphone
Apple iPhone XS375 x 8121125 x 24363.0smartphone
Apple iPhone 11 Pro375 x 8121125 x 24363.0smartphone
Apple iPhone XR414 x 896828 x 17922.0smartphone
Apple iPhone 11414 x 896828 x 17922.0smartphone
Apple iPhone XS Max414 x 8961242 x 26883.0smartphone
Apple iPhone 11 Pro Max414 x 8961242 x 26883.0smartphone
Apple iPad 3768 x 10241536 x 20482.0tablet
Apple iPad 4768 x 10241536 x 20482.0tablet
Apple iPad 5768 x 10241536 x 20482.0tablet
Apple iPad 6768 x 10241536 x 20482.0tablet
Apple iPad Air 1768 x 10241536 x 20482.0tablet
Apple iPad Air 2768 x 10241536 x 20482.0tablet
Apple iPad Pro 9.7768 x 10241536 x 20482.0tablet
Apple iPad mini 3768 x 10241536 x 20482.0tablet
Apple iPad mini 4768 x 10241536 x 20482.0tablet
Apple iPad mini 7.9768 x 10241536 x 20482.0tablet
Apple iPad 10.2810 x 10801620 x 21602.0tablet
Apple iPad Pro 10.5834 x 11121668 x 22242.0tablet
Apple iPad Air 10.5834 x 11121668 x 22242.0tablet
Apple iPad Pro 12.91024 x 13662048 x 27322.0tablet
Apple Watch Series 4 (40mm)197 x 162394 x 3242.0watch
Apple Watch Series 4 (44mm)224 x 184448 x 3682.0watch
Apple MacBook Pro 2019 16 inch1536 x 9603072 x 19202.0PC
Apple MacBook Air 2018 13 inch1280 x 8002560 x 16002.0PC
Apple MacBook Pro 2018 15 inch1440 x 9002880 x 18002.0PC
Apple MacBook Pro 2018 13 inch1280 x 8002560 x 16002.0PC
Apple MacBook Pro 2017 15 inch1440 x 9002880 x 18002.0PC
Apple MacBook Pro 2017 13 inch1280 x 8002560 x 16002.0PC
Google Nexus 4384 x 640768 x 12802.0smartphone
Google Nexus 5360 x 6401080 x 19203.0smartphone
Google Nexus 5X411 x 7311080 x 19202.6smartphone
Google Nexus 6411 x 7311440 x 25603.5smartphone
Google Nexus 6P411 x 7311440 x 25603.5smartphone
Google Nexus 7 2012600 x 960800 x 12801.3tablet
Google Nexus 7 2013600 x 9601200 x 19202.0tablet
Google Nexus 9768 x 10241536 x 20482.0tablet
Google Nexus 10800 x 12801600 x 25602.0tablet
Google Pixel411 x 7311080 x 19202.6smartphone
Google Pixel XL411 x 7311440 x 25603.5smartphone
Google Pixel 2411 x 7311080 x 19202.6smartphone
Google Pixel 2 XL411 x 8231440 x 25603.5smartphone
Google Pixel 3411 x 8231080 x 21602.625smartphone
Google Pixel 3 XL411 x 8461440 x 29603.5smartphone
Google Pixel 3a411 x 8461080 x 22202.625smartphone
Google Pixel 3a XL411 x 8461080 x 21602.625smartphone
Google Pixel 4411 x 8691080 x 22802.625smartphone
Google Pixel 4 XL411 x 8691440 x 30403.5smartphone
Huawei Y9s360 x 7801080 x 23403.0smartphone
Huawei Mate 30 Pro392 x 8001176 x 24003.0smartphone
Huawei Mate 30360 x 7801080 x 23403.0smartphone
Huawei Mate 20 Pro360 x 7801440 x 31204.0smartphone
Huawei Mate 20 Lite360 x 7801080 x 23403.0smartphone
Huawei Watch GT227 x 227454 x 4542.0watch
Huawei Watch Magic195 x 195390 x 3902.0watch
Samsung Galaxy J7360 x 640720 x 12802.0smartphone
Samsung Galaxy J7 Prime360 x 6401080 x 19203.0smartphone
Samsung Galaxy On8360 x 6401080 x 19203.0smartphone
Samsung Galaxy S8360 x 7401440 x 29604.0smartphone
Samsung Galaxy S8+360 x 7401440 x 29604.0smartphone
Samsung Galaxy Note8414 x 8461440 x 29603.5smartphone
Samsung Galaxy J6360 x 740720 x 14802.0smartphone
Samsung Galaxy J8360 x 740720 x 14802.0smartphone
Samsung Galaxy J7 Pro360 x 6401080 x 19203.0smartphone
Samsung Galaxy J5360 x 640720 x 12802.0smartphone
Samsung Galaxy J5 Prime360 x 640720 x 12802.0smartphone
Samsung Galaxy J4360 x 640720 x 12802.0smartphone
Samsung Galaxy S9360 x 7401440 x 29604.0smartphone
Samsung Galaxy J7 Prime2412 x 7321080 x 19202.625smartphone
Samsung Galaxy Watch240 x 240360 x 3601.5watch
Samsung Galaxy Note9414 x 8461080 x 29603.5smartphone
Samsung Galaxy A6s360 x 7201080 x 21603.0smartphone
Samsung Galaxy S9+360 x 7401440 x 29604.0smartphone
Samsung Galaxy S10360 x 7601440 x 30404.0smartphone
Samsung Galaxy S10+412 x 8691440 x 30403.5smartphone
Sony XPERIA X360 x 6401080 x 19203.0smartphone
Sony XPERIA XZ360 x 6401080 x 19203.0smartphone
Sony XPERIA XA360 x 540720 x 10802.0smartphone

Related articles