/*mobile - landscape*/
@media only screen and (min-width: 568px) and (max-width: 736px) {}

/*mobile - portrait*/
@media screen and (min-width: 320px) and (max-width: 414px) {}


    @media screen and (max-width: 991px) {
    /* start of large tablet styles */
    }
    @media screen and (max-width: 767px) {
    /* start of medium tablet styles */
    }
    @media screen and (max-width: 479px) {
    /* start of phone styles */
}

Most Popular Screen Resolutions

Knowing that it is key to accommodate for the many different devices when designing websites, we have compiled a list of the most up-to-date devices with their respective pixel sizes and viewports below. We have also put this information into a handy downloadable PDF.

Desktops & Laptops

1024×768 pixels or higher