CSS @Media Query

What screen resolutions do you use :

• Smartphone: 320px
• Tablet: 768px
• Netbook: 1024px
• Desktop: 1600px

It facilitates you can use fluid grids, flexible images, and media queries to progressively enhance a web page for multiple viewing contexts i.e. Desktop, Smartphone, Tablet, phone etc.

LIST:

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
 /* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
 /* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
 /* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
 /* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
 /* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
 /* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
 /* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
 /* styles */
}