CSS Media Query

Every device can have different properties like size, type, resolution, color, orientation etc. CSS @media query used to apply conditional css style which based on device properties.

There are two ways to include media query in web application

@media not|only mediatype and (media feature) {
  // css code;
}

<link rel='stylesheet' media='mediatype and|not|only (media feature)' href='style.css'>

Generic responsive template - this is best way to use media queries below

/*desktops - higher resolution*/
@media (min-width: 1281px)

/*laptops, desktops*/
@media (min-width: 1025px) and (max-width: 1280px) 

/*tablets, ipads (portrait)*/
@media (min-width: 768px) and (max-width: 1024px)

/*tablets, ipads (landscape)*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape)

/*low resolution tablets, mobiles (landscape)*/
@media (min-width: 481px) and (max-width: 767px)

/*smartphones mobiles (portrait)*/
@media (min-width: 320px) and (max-width: 480px)