Media Queries for Responsive Web Design

External Call

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

 

CSS Direct Call

@media screen and (min-width:320px) and (max-width:480px)

{

/*Style Declarations For This Width Range */

}

@media screen

For those unfamiliar with the media attribute, it is used to separate what styles are called for different media types. Commonly used types are print, speech, projection, braille, and all. Despite the usefulness of each media type, for RWD our focus shall be geared toward the screen type. By definition the screen value is intended primarily for color computer screens, and is the default value for CSS. This call to media type is how you start the query and later call on your parameters.
Examples:

A call to set the body background to red for computer screens

 

@media screen{

body{background: #ff0000;}

}