An Overview of CSS3 Media Queries

The rapid use of Smart phones and mobile devices have changed the way information is processed and made available to the web audience. The surprising growth of such devices is leapfrogging the traditional desktops, making users view a website on mobile phones and tablet devices anytime, anywhere.

When talking about such web designs that should compliment the various dimensions of different devices, it is difficult not to mention about the challenges that web designers face while creating them. CSS3 media queries are a great way to overcome such challenges and making web designs look amazing, while providing a pleasurable experience to each type of user.

As a part of CSS3 specification, these media queries determine the role of the media and control how styling should be applied to them. They allow web designers target different styles based on multiple specifications of a device such as screen size, orientation, color and so on.

This article provides you an overview of media queries that will help designers kick start their multi screen website development endeavors.

CSS3 Media Queries

CSS 2.1 supports several media types based on “media type” declarations. The following mark up clearly explains about how media types can be used to specify conditional style sheets.

<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

When placed correctly, the site will load a different stylesheet from the default sheet, when set in a print preview mode. The feature is useful but often remain underutilized because of its incapability to provide valuable contextual clues for developing a responsive website. As only 10 media types are being used by the media specifications, browsers often fail to adapt complete media specifications.

The “media” attribute plays a significant role in determining various media related element of a web page. It helps you specify media type on the basis of screen, print and more and also let you incorporate various expressions that include width, height, orientation, screen resolution etc., of the device being used. Here, we are giving you an example of a device that’s media type is screen and resolution is 720 pixels.

<link rel="stylesheet" media="screen and (min-width: 720px)" href="main.css" />

It’s the media query that determines the overall designing process. The left side highlights those properties of a design that needs to be tested, and gives an option ranging from min-max. The right is the actual value of the tested property. If the browser and the mobile having 720 pixels of screen width, the style.css will be implemented by the webmasters. This way, it can be said that media queries an indeed useful to give developers an insight about the context to develop web pages that are truly responsive.

Ways to Define Media Queries

A simple media query in HTML can be written like this:

<link rel="stylesheet" media="width" ref="abc.css" />

In the above example, we have stated that for width media query, abc.css style sheet needs to be used.

The same can also be written in import form:

@import url(abz.css) print; 

In cases where no media type is given or ‘all’ is specified, the styling would be done like this:

<link rel="stylesheet" href="abc.css" />
<link rel="stylesheet" media="all" ref="abc.css" />

One can also combine the media queries to create a complex structure:

<link rel="stylesheet" media="width, projection" href="abc.css" />

this can also be written like this:

@media width, projection { … }

Using Media Queries for Multiple and Single Style Sheets

Creating multiple style sheets to suit the requirements of different device screens and sizes can be daunting. However, if you still want to create multiple style sheets, this is how you can do so:

<link rel="stylesheet" media="screen and (max-width: 800px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 800px)" href="large.css" />
<link rel="stylesheet" media="print" href="print.css" />

To boost the productivity, it is recommended to incorporate multiple style sheets created for different browsers and screen into a common one. Here’s how you can go through it.

@media screen and (min-width: 800px) {
  .eighthundredminwidthclass {
    width: 35%;
    Float: right;
 } 
}
and
@media screen and (max-width: 800px) {
    .eighthundredmaxwidth {
    clear: both;
    font-size: 1.5em;
    }
}

You must have noticed the use of max-width in the above and min-width on the below examples. It is important to know the difference between the two. In the case of desktop, it is easy to understand. Min-width and max-width refer to the size of the browser viewport, while max-device-width and min-device-width are applied for hand held devices.

Conclusion

CSS3 media queries are the heart of a responsive web design, therefore, should be used logically. It’s about presenting an information that meets the demands of both web browsers and hand held devices.

You may also like...