Media Queries on CSS: How to target desktop, tablet, and mobile?

/ Developer Forums / By globination

Targeting media features

@media (min-width:320px)
{
    /*smartphones, portrait iPhone, portrait 480x320 phones (Android)*/
}
@media (min-width:480px)
{
    /*smartphones, Android phones, landscape iPhone*/
}
@media (min-width:600px)
{
    /*portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android)*/
}
@media (min-width:801px)
{
    /*tablet, landscape iPad, lo-res laptops ands desktops*/
}
@media (min-width:1025px)
{
    /*big landscape tablets, laptops, and desktops*/
}
@media (min-width:1281px)
{
    /*hi-res laptops and desktops*/
}

Targeting media types

Media types describe the main types of devices. Web designers are using these queries to write separate styles to create that target special devices such as printers different types of screens.

@media print { ... }
// this use for write css for print preview

@media screen, print { ... }
// this use for web and print media preview

Related