How To Use CSS Media Queries

CSS media queries are an important skill to learn when trying to manipulate website layouts and styles for various screen sizes. Using media queries designers are able to target specific screen sizes and devices which allows designers and web developers to adjust the CSS styles for desktop computers, tablets and smartphones accordingly.

I pretty much use media queries for every website that I design now as I provide a responsive website design service, so the use of media queries is really quite essential for me in building truly responsive websites (You can learn more about responsive web design here). There are alternative ways of building websites but in my opinion media queries are essential for most sites.

So How Do You Add Media Queries?

A media query is added to a CSS file. Some people like to put media queries in a separate CSS file but usually I just add them to the bottom of my main CSS file as to me this seems logical as they often influence the main styles that determine the layout of a web page.

With media queries you can specify both a minimum width and a maximum width which is very powerful for targeting your intended screen size or device. You can also specify additional parameters but I will discuss these later in this article.

The code snippet below shows an example of a basic media query:

[code]
@media only screen
and (min-width : 321px)
and (max-width : 700px) {
h5 {
font-size:2em;
line-height:2em; }

h6 {
font-size:1em;
line-height:1em; }
}
[/code]

The ‘media only screen’ is required to target screens, which is then followed by the parameters. In the above example a minimum width and a maximum width has been added so that any screen sizes with a width of 321px – 700px will be targeted.

You can set minimum width or maximum widths on their own if you like. A good example of when this might be most useful is in the situation of wanting to target larger desktop screens without setting a maximum parameter, so that any screens above a minimum width will be affected by the media query. An example of this can be seen below:

[code]
@media only screen
and (min-width : 1000px) {
h5 {
font-size:3em;
line-height:3em; }

h6 {
font-size:2em;
line-height:2em; }
}
[/code]

An important thing to note is the way that a media query is declared with the CSS styles being contained within curly brackets of the media query. It is very easy when you first start using media queries to confuse the closing curly bracket of the media query with a closing curly bracket of a CSS style that should be contained within the media query (notice the code above contains two curly brackets at the end).

More Advanced Media Queries

Once you have become familiar with adding media queries for minimum and maximum widths you may like to refine the ability to target specific devices even further.

With many high definition / retina display mobile devices now available it is difficult to accurately target these using standard minimum and maximum widths. Fortunately you can target high definition and retina display mobile devices accurately by using the device width parameter. The device width parameter specifies the actual resolution of the device (the screen size) whilst the standard min or max width targets the size of a browser window. This is a little confusing but the device width parameters are very useful for targeting mobile devices as the precise amount of pixels available to a certain device can be specified.

The example below shows how the media query device width parameters can be used to target an iPad held in a portrait orientation (This is achievable as the pixels represent that of the min and max width of the iPad in portrait orientation):

[code]

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {

h5 {
font-size:3em;
line-height:3em; }

h6 {
font-size:2em;
line-height:2em; }

}

[/code]

The code below can also be even more specific by including the orientation of the device within the media query as shown in the example below:

[code]

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

h5 {
font-size:3em;
line-height:3em; }

h6 {
font-size:2em;
line-height:2em; }

}

[/code]

The best way to learn media queries though is to experiment with them for yourself. If you have access to a desktop, laptop, tablet or smartphone you can target the devices and then see how your own media queries are rendered in the browsers.