By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Get Started With CSS Media Queries

Learn how to use media queries to target handheld devices.

Edited: 2015-04-01 11:42

Ever thought that it would be nice, if you didn't have to design two separate sites? One for mobile and another for laptop and desktop screens? Perhaps ideally, a website would just gracefully degrade when necessary, and one place for that to occur, is on handheld devices.

Devices comes with great diversity in their screen dimensions, some having such minuscule dimensions that its ridiculous to use them for browsing, since reading anything becomes clumsy and impractical. But what if you could magically make your website adapt to whatever screen real estate that's available to it?

The only problem is, that not every design is suitable, so you will just have to experiment. Some designs require little work, and perhaps as little as a single CSS deceleration. With media queries however, you can greatly enhance the usability of a design.

Setting max-width with media queries

The max-width property, when used with a media query, controls how your layout behaves, if the screen dimensions goes below the specified max-width. To make media queries work however, you will first need to add the following meta tag to your the head section of your web page.

<meta name="viewport" content="width=device-width, initial-scale=1">

Your media queries should start working in handheld devices, after adding the meta tag.

We can now add a media query, which is using the max-width property, to control what happens when the available width, is less than a certain dimension in pixels.

@media screen and (max-width:500px) {

}

All of our CSS rules should be placed between the opening "{" and closing "}" brackets, this means that they will only apply when, or if the width is below the specified max-width of the media query.

A typical thing to do, would be to move things around enough, so that you have a 1-column layout. A multi-column layout can be made to gracefully degrade. A 3 column layout first degrading to a 2 column layout, and finally a 1 column layout – depending on the available screen width.

@media screen and (max-width:728px) {
  #basement {min-width:300px;}
  #LeftColumn, #Content {float:none;}
}

You can even have multiple media queries, so that you would have one to handle screen resolutions below 700px, and then another to handle resolutions approaching some handheld devices, say 300px or something - at which point its probably best to go entirely 1-column.

@media screen and (max-width:728px) {
  #basement {min-width:300px;}
  #LeftColumn, #Content {float:none;}
}
@media screen and (max-width:500px) {
  #RightColumn {float:none;}
}

Just remember that declarations from the first media query, still will be applying for screens that are 500 pixels in width. It only says that the width should be less than 728px wide, so it will automatically apply to devices that less available space.