CSS Media Queries

By CRAIG KUNCE

This tutorial teaches web designers how to design a web site for tablets, smartphones, and mobile devices.

When I want to automatically adjust my web site to fit an iPad, iPhone, or smartphone, I use css media queries.

Media queries, based on css at-rules, help me adapt and deliver my web site to different monitor display sizes, hand-held devices, tablets and phones.

To see these queries in action, slowly close your browser's window and watch this web page layout change when it hits 480 pixels wide. Pretty cool.

 

How they work

When a media query detects a different screen size, it simply delivers an additional set of css rules that styles the site for that specific screen size. They use the same css @rule than a print style sheet uses.

 

Where to put them

I place media queries "inline" or inside, at the end, of your web site's main css file. Then there is only one file to manage. Some people like to make several different css style sheets and call them out where needed--I like the cleaner, inline method instead. This works especially well if you are adding new media queries to an existing large web site. The main css file is already linked to every page.

 

Designing with flexibility (%) in mind

I design my web pages with all widths defined in percents -- not pixels. Thinking about this in the beginning stages of your web site design will save you a lot of work later on. Let me explain with a visual:

media queries

 

 

The majority of the work my site's media query does is to change the width of the body. The rest of the divs are automatically resized--because they were set up as percentages, not fixed pixels.

 

Media queries in action on a laptop

Here's a page from this web site when viewed on my MacBook Pro 13", screen size is 1280x800.

css media queries

 

 

Same web page on an iPad - Horizontal

css media queries

 

Here's the media query that changes the page when it's viewed on an iPad - landscape format:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
body {
width:95%;
font-size:1.2em;
}
#nav a:hover {
background-image:none;
}
.nav_on {
background-image:none;
}
#nav2 p {
-webkit-column-count:5; /* Safari Chrome */
-moz-column-count:5; /* Firefox */
column-count:5;
}
}

 

The main changes are:

  • Make my web site's width 95% of the iPad's landscape screen
  • Increase all fonts by 20%
  • Reduce the secondary nav columns from 7 to 5
  • Deleted the background image in my navigation

 

 

Same web page on an iPad - Vertical

css media queries

 

Here's the media query that changes the page when it's viewed on an iPad - portrait format:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
body {
width:95%;
font-size:1.4em;
}
#nav a:hover {
background-image:none;
}
.nav_on {
background-image:none;
}
#nav2 p {
-webkit-column-count:4; /* Safari Chrome */
-moz-column-count:4; /* Firefox */
column-count:4;
}
}

 

The main changes are:

  • Make my web site's width 95% of the iPad's portrait screen
  • Increase all fonts by 40%
  • Reduce the secondary nav columns from 7 to 4
  • Deleted the background image in my navigation

 

Same web page on an iPhone/iPod touch

css media queries

 

Here's the media query that changes the page when it's viewed on an iPhone/iPod screen:

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
body {
width:95%;
font-size:3em;
background-image:url(images/cc_background_iphone.png);
background-repeat: repeat;
}
#header {
height:auto;
}
#header img {
width:70%;
height:auto;
}
#nav {
border-radius:20px 20px 0 0;
-moz-border-radius:20px 20px 0 0;
-webkit-border-radius:20px 20px 0 0;
-ms-border-radius:20px 20px 0 0;
box-shadow:inset 3px 3px 10px #333;
}
#nav2 {
border-radius:0 0 20px 20px;
-moz-border-radius:0 0 20px 20px;
-webkit-border-radius:0 0 20px 20px;
-ms-border-radius:0 0 20px 20px;
box-shadow:inset 3px 3px 10px #333;
}
#section {
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-ms-border-radius:20px;
box-shadow:inset 3px 3px 10px #333;
}
#article {
width:94%;
padding:0 3% 0 3%;
}
#article img {
width:100%;
height:auto;
}
#nav2 p {
-webkit-column-count:2; /* Safari Chrome */
-moz-column-count:2; /* Firefox */
column-count:2;
}
.nav_on {
background-image:none;
}
#aside {
display:none;
}
#footer {
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-ms-border-radius:20px;
box-shadow:inset 3px 3px 10px #333;
}
}

 

This media query targets high-resolution devices with a minimum pixel ratio of 1.5. I started using a min pix ratio of 2, but that didn't work on other smart phone (just iphone). So I reduced the ratio to 1.5 and it worked on many other smartphones.

Something interesting is happening here… Notice that I have left my web site full size (about 1000 pixels wide) and simply increased the size of everything else. The high resolution of these screens allows this.

The main changes are:

  • Make my web site's width 95% of the iPhone's screen
  • Increase all fonts by 300% (3em)
  • Inserted a larger background pattern
  • Increased the size of the main logo
  • Reduce the secondary nav columns from 7 to 2
  • Deleted the background image in my navigation
  • Hid the entire right column of ads
  • And finally, increased all corner radii and inset drop shadow widths

Media queries at work on this site

Slowly close your browser window (yes, right now) and you'll see my media queries in action. Pretty coll, Huh!?

After much trial and error I have grown to appreciate Joni Korpi's approach to media queries. It's a very simple approach—which usually means it is a good approach. Plus, this approach seems to work on everything I've tried: Android, Mac, laptops, desktops, tablets, mini-tablets, phones, hi-res, regular-res., etc.

Here we go…

  1. Add the following to your <head></head>:
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    • This will set the screen to the device's width.
      It gives your css an accurate starting point when determining which media query should be delivered to the device.
    • Some people add user-scalable=no to their code so users can't pinch and enlarge the images. I perfer to allow my viewers to have as much control as possible, so I leave this out.
  2. Add these media queries to the bottom of your main CSS document:
    • @media only screen and (min-width: 768px) and (max-width: 991px) { add your css rules between these brackets }
    • @media only screen and (max-width: 767px) { add your css rules between these brackets }
    • @media only screen and (min-width: 480px) and (max-width: 767px) { add your css rules between these brackets }
  1. Be sure to include the following comment at the very bottom:
    • /* --A Special Thank You--
      Media Queries Adapted from:
      Less Framework 4
      http://lessframework.com
      by Joni Korpi
      License: http://opensource.org/licenses/mit-license.php */
  2. Now all you have to do is add your own css rules to change how your site displays on each device.
  3. That's it! I told you it was simple : )