CSS Media Queries

css-media-queries.css

/* ==== Media Queries ==== */

/* From HTML: */

<!-- All common styles -->
<link rel="stylesheet" href="common.css" type="text/css" media="screen" /> 
<!-- Devices between 480-1024px -->
<link rel="stylesheet" href="styles_max_1024.css" type="text/css" media="only screen and (min-width:481px) and (max-width:1024px)" />
<!-- Devices below 480px -->
<link rel="stylesheet" href="styles_max_480.css" type="text/css" media="only screen and (max-width:480px)" />

/* From CSS file: */

/* Common CSS Goes Here */

/* Devices between 480-1024px */
@media screen and (min-width:481px) and (max-width:1024px) {
    /* styles go here */
}

/* Devices 480px & below */
@media screen and (max-width:480px) {
    /* styles go here */