Introduction

CSS media queries are an essential part of the modern day web. Media queries allow us to quickly and easily build websites that render properly on all device types. In this article we will show you the basics of using CSS media queries. Let's get started.

Introducing Media Queries

If you've been doing web development long enough, you'll remember that building websites used to be a much more difficult task then it is now. Prior to CSS 3 and the modern web, you pretty much had to build for a fixed viewport hope for the best. All that changed with CSS 3 and HTML 5. CSS 3 and HTML 5 introduced a number of changes that made cross platform, cross device development much easier. One of these changes was the introduction of CSS media queries. CSS media queries allow you to quickly and easily constrain content to a specific size viewport, or change the styles of content based on viewport size.

Note that throughout this article, you'll see the word viewport used quite a bit. By this, i mean the browser window size. Not to be confused with the screen size. The media queries used in this article are browser centric as opposed to device centric. If you resize your browser window to a small window, these media queries will take effect, just like they would when displayed on a phone.

For example, let's say you want a specific styles to only apply to small viewports with a resolution of 330px or lower. You could simply place all of your styles inside the following CSS media query:

HTML:

<!doctype html>
<html>
    <head>
        <title>CSS3 Media Queries Example</title>
    </head>
    <body>
        <div class="small">
            Small Viewport
        </div>
        <div class="medium">
            Medium Viewport
        </div>
        <div class="large">
            Large Viewport
        </div>
    </body>
</html>
CSS:

@media only screen and (max-width: 330px) {
    /* styles for low res screens go here */
    /* hide our medium and large divs)  */
    .medium, .large  { 
        display: none;
   }
}

Given the code above, the divs containing a class of medium and large will be hidden for viewports with less than 330px of resolution. However, what exactly does @media only screen and (max-width: 330px) mean? Let's break it down.

The first part, @media only screen tells your browser that we only wish to apply the style listed above to a screen, such as an LCD monitor or mobile phone touch screen. There are other media types available which are listed here. The most important of them outside screen is print, which allows you to customize how your content looks when printed.

The next part, and (max-width: 330px) tells your browser we only wish to use the given set of styles for a viewport size of 330px or lower. Given this, you may be wondering how exactly you'd target larger viewports without showing all of the styles. Well, it's quite easy:


@media only screen and (min-width: 331px) and (max-width: 660px) {
     .small, .large {
         display: none;
    }
}

The styles in the media query listed above will only show for viewport sizes of between 331px and 660px. Similarly, we can create a style for large, high resolution devices using the following media query.


@media only screen and (min-width: 661px) {
    .small, .medium {
        display:none;
    }
}

The complete listing below will show the small class for small screens, medium class for medium screens, and large class for large screens.


<!doctype html>
<html>
    <head>
        <title>CSS3 Media Queries Example</title>
        <style type="text/css">
            @media only screen and (max-width: 330px) {
                .medium, .large {
                    display:none;
                }
            }

            @media only screen and (min-width: 331px) and (max-width: 660px) {
                .small, .large {
                    display: none;
                }
            }

            @media only screen and (min-width: 661px) {
                .small, .medium {
                    display:none;
                }
            }
        </style>
    </head>
    <body>
        <div class="small">
            Small Viewport
        </div>
        <div class="medium">
            Medium Viewport
        </div>
        <div class="large">
            Large Viewport
        </div>
    </body>
</html>

Note that the code above doesn't take into consideration portrait vs landscape on phones, which could cause things to change depending on orientation. For instance, a phone with a 320x480 resolution would display either small or medium, based on orientation. Also note that there are more advanced media queries you can do, each with varying levels of browser compatibility.

That's it, thanks for reading!