Media queries are simple conditions used to targetting different devices for tables, phones or desktop computers. As each device may have different view size, media queries become so handy to use to display the content dimension correctly.

Browser support for Media Queries

Media queries are supported by the following browsers: IE9+, Chrome 4+, Firefox 3.5+, Opera 9.5+, Safari 4+, Android 2.1+, iOS Safari 3.2+

How it works?

It is pretty simple, you just need to specify different dimension size wrap inside a dimension code block. It is like an if condition code block, where you just need to define the minimum width or maximum width or could be combination of both dimension together.

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
   /*** ENTER YOUR CSS CODE IN HERE ***/
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
   /*** ENTER YOUR CSS CODE IN HERE ***/
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
   /*** ENTER YOUR CSS CODE IN HERE ***/
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
   /*** ENTER YOUR CSS CODE IN HERE ***/
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
   /*** ENTER YOUR CSS CODE IN HERE ***/
}

If you prefer to separate the css into an external file, you can use the following sample code.

<link type="text/css" rel="stylesheet" href="mobile.css" media="only screen and (max-width: 320px)"/>

<link type="text/css" rel="stylesheet" href="tablet.css" media="only screen and (min-width: 769px) and (max-width: 960px)"/>

If you prefer to import the css directly from a css file, you can use the following sample code.

@import url(mobile.css) only screen and (max-width: 320px);
@import url(tablet.css) only screen and (min-width: 769px) and (max-width: 960px);