CSS Media Queries

This lesson is part of the Web Programming 1 Course.

You've already learned that setting the width of an element to a percent can allow the element to stretch or shrink depending on the screen size used to visit a web page. When a web page adapts itself to various screen sizes, it is said to be responsive. Nowadays all of your web pages should be responsive because there are so many devices that can be used to visit your site. A responsive web page is one that will adapt itself to different screen sizes. Mobile phones have small screens, tablets can be held in 'landscape' or 'portrait' orientation, and of course there are monitors that can range in size, so it's imperative for your pages to be responsive.

In this lesson we'll discuss CSS media queries, which allow your page to detect the screen size of a device, and apply different rule sets for various sizes.

Here's the starter code for this activity (you can create a file named media-queries.html and paste this code into it):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Queries</title>
    <style>
      header{
        color: white;
        background-color: midnightblue;
        padding: 20px;
      }

      nav{
        color: white;
        background-color: lightblue;
        padding: 20px;
      }

      main, aside{
        box-sizing: border-box;
        float: left;
        height: 400px;
        padding:20px;
      }

      main{
        width: 70%;
        background-color: white;
      }

      aside{
        width: 30%;
        background-color: lightgray;
      }

      footer{
        color: white;
        background-color: midnightblue;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <header>
      HEADER
    </header>
    <nav>
      NAV BAR
    </nav>
    <main>
      MAIN CONTENT
    </main>
    <aside>
      SIDE BAR
    </aside>
    <footer>
      FOOTER
    </footer>
  </body>
</html>

To add a media, put this code under the last rule set in the style element:

/* 
The rule sets inside this media query will
take effect when the browser window is a max of 600px wide or less
*/
@media all and (max-width:600px){
  /*we'll put some rule sets here*/
}

The syntax is strange, but this media query means the when the screen is a maximum size of 600px or less, the rule sets inside of it will take affect. If the screen is bigger than 600px, the rule sets inside the media query will be ignored.

I chose 600px because it's common for phones to have a screen that is approximately this wide. The number that you choose in your media query is known as the break point.

Now let's add a rule set, update the media query to look like this:

@media all and (max-width:600px){
  main, aside{
    width: 100%;
    float: none;
  }
}

First, note that the rule set is indented within the media query. This makes the code easy to read. If the rule sets inside a media are not indented, it could be difficult to see where the media query begins and ends.

The rule set uses a grouped selector to target the main and aside elements. The rules inside of it reverse some of the properties that were set before the media query. If you look at the code above the media query, you'll see that we set the width of the main element to 70%, and the width of the aside to 30%. We also set the float property to 'left', which caused the two elements to 'float' side by side from left to right. These settings created a two column for our page. But for small screens, a two column layout does not work very well. So our page now 'responds' to smaller screens by going to a single column layout.

There are many other things you can do inside a media query to make your page responsive. The video covers quite a few of them.

NOTE: I threw in a lot of CSS props that we haven't really discussed,

Maybe it would be a good idea to have the students explain some of them and mention some of the values they can be set to: