Media Queries Based on Most Popular Screen Resolutions, 2015

Here’s my list of most popular desktops / laptop screen resolutions media queries to use in CSS. Based on maximum of a resolution minus 1 pixel.

/**************** MEDIA ****************/
/* width */
@media only screen and (max-width: 1919px) {}
@media only screen and (max-width: 1679px) {}
@media only screen and (max-width: 1599px) {}
@media only screen and (max-width: 1439px) {}
@media only screen and (max-width: 1365px) {}
@media only screen and (max-width: 1279px) {}
@media only screen and (max-width: 1151px) {}
@media only screen and (max-width: 1023px) {}
/* height */
@media only screen and (max-height: 1399px) {}
@media only screen and (max-height: 1199px) {}
@media only screen and (max-height: 1049px) {}
@media only screen and (max-height: 899px) {}
@media only screen and (max-height: 863px) {}
@media only screen and (max-height: 767px) {}

Share:
This entry was posted in CSS CheatSheets and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published.