Since smartphones and tablets have been around, website owners have battled with getting their sites to display optimally on any size screen. One approach taken by many, (when these devices first haunted website owners) was to build a mobile version of the current site. Thus, a conditional statement would be placed on the index page of the website stating that, if the browser/device was such, it would give you the option of displaying the appropriate version of the site (mobile or desktop). Now when a user visits your site on a smartphone, the mobile version will automatically be displayed versus the desktop version—a result of so many website owners flocking to their designers and demanding a mobile version of their site.

Then came the W3C with its improved media queries to create what is called responsive web design. Responsive web design (RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors, to tablets, to mobile phones).

Media queries today can be used to scope styles to specific capabilities, thus applying different styles based on the capabilities that match the query. Queries can even be combined to test for several features by using semantic operators.
These features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more.

There are three different ways to implement media queries for a website:

1. Use the @import rule to import style rules from other style sheets:

For example: @import url(style500min.css) screen and (min-width: 500px)

2. Placing media queries directly in a stylesheet:

For example:

#nav
{
float: left;
}
#nav ul
{
list-style: none;
}
@media screen and (min-width: 400px) and (orientation: portrait)
{
#nav li
{
float: left;
margin: .5em 0 0 0;
}
}
@media screen and (min-width: 600px)
{
#nav
{
width: 175px;
}
#nav li
{
float: left;
margin: .5em 0 0 0;
border: none;
}
}

3. Include a query in a linked stylesheet with a media attribute:

For example:
<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 600px)” href=”style600.css” />

Due to the nature of CSS, default styles are defined at the top with the media query matching rules and styles below. Styles defined at the top will be cascaded to the matching styles in the rule.

Mediaqueri.es showcases many sites that have been designed using a responsive approach.