Responsive Design with CSS3 Media Queries

Media Queries continues to frustrate web developers just as much as they are exited. CSS3 brings tons possibilities, and solves many many problems, but it comes with a lack of support in old browsers, specially in Internet Explorer.

The V3C definition of the media query is:

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

Media queries consist of a media type and can, as of the CSS3 specification, contain one or more expressions as media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.

Here is a simple media query example used in a link element:

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

And here is a media query example used within a style sheet:

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>

You can compose complex media queries using logical operators, including not, and, and only. You can also combine multiple media queries. If any of the media queries in the list is true, the entire media statement returns true. The following code will apply if the viewing area is between 600px and 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}

or you can use a coma separated list

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

Basically, this means you can change stylesheets based on for instance the width and height of the viewport. In a broader sense, this means as the spec puts it: “by using Media Queries, presentations can be tailored to a specific range of output devices without changing the content itself.” And this a simple definition of responsivnes.

Here is a media query list for some devices out there

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Media Queries for Internet Explorer

Unfortunately, media query is not supported in Internet Explorer 8 or older. You can use Javascript to hack around. You can find some simple solution on CSS Tricks – using jQuery to detect browser size or you can use the jQuery Media Queries Plugin

Here is a simple yet powerful responsive demo site by “a list apart” using CSS3 media query.

Large size: navigation at the top, 1 row of pictures
Medium size: navigation on the left side, 3 columns of pictures
Small size: navigation at the top, no background image on logo, 3 columns of pictures

media queries demo

Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn’t work any more. Web design needs to be adaptive and responsive. The layout needs to automatically adjust and respond to all display resolution and devices.

1 thought on “Responsive Design with CSS3 Media Queries”

  1. In order to fit the viewers screen, leaving the navigation,
    text and forms large enough to easily read and
    navigate with a minimum of resizing, panning and scrolling.
    Altering images in order to make them easily viewable on different mobile
    devices.

Leave a Reply