CSS declaration with Media Queries

Media Query is a condition declared for browser to include or exclude a set of CSS rules or a separate stylesheet. Read more about Media Queries.

There are two methods for CSS declaration with Media Queries:
1. Declare a single stylesheet and include Media Queries into CSS. Here is an example:

/*---rules for mobile devices----*/
@media screen and (max-width: 480px)
{
#wrapper{
width: 320px;
min-width: 320px;
}

#content img {
height: auto !important;
max-width: 300px;
}
}

/*---rules for small tablets----*/
@media screen and (min-width: 481px) and (max-width: 767px)
{
#wrapper{
width: 480px;
min-width: 480px;
}
#content img{
height: auto !important;
max-width: 460px;
}
}

2. Create separate CSS stylesheets and declare in HTML

<link type="text/css" rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 480px)" />
<link type="text/css" rel="stylesheet" href="css/tablet-vert.css" media="screen and (min-width: 481px) and (max-width: 767px)" />

Type: 
Is required: