Media queries

- [Instructor] With a responsive website, you're usually going to change the layout of the page depending on the width of the user's viewport. Often we'll change the number of columns or move things around on the page but even with a very basic one-column site, you're still going to want to change things like line length to make sure the layout still looks good on any viewport size. The way we tell the browser to do something different based on the viewport width is through media queries. A media query is just like it sounds, a query or a question about the media that the webpage is being displayed on.

The answer determines whether a section of CSS is applied when rendering the page. In CSS, media queries always start out with outside media followed by the actual query. So for example, here we have a page that's just an empty page with nothing in the body but I'm going to use a media query to change the background color of the page. So I'm going to start with @media and then I have parentheses min-width, 600 pixels. That's my query.

And then the CSS that I want to add when that is true is body background color is blue. So we're asking the browser, is the viewport a minimum width of 600 pixels. If the query is true, then the CSS inside of the media query is applied. If the query is false, the CSS is ignored. So let's take a look at how this works on a webpage. I'm going to refresh. This is already wider than 600 pixels so the background color is blue.

But if it's not wider than 600 pixels, then that media query is not true so that CSS style is not applied to the page. What's really cool is that the browser continually reevaluates the CSS as you change the size of the browser window so it will automatically redraw the page when it needs to. You don't need to hit refresh. Taking a look at the code again, let's see how this works. So we start out here on line eight with @media and then we have the query here in parentheses.

Now there are a bunch of different things we can query. The most common for a responsive layout is going to be min-width which is minimum width and max-width which is maximum width. These refer to the width of the viewport, not the screen. That's important because on desktops and laptops, not everybody will have their browser window to full size of the screen. There's also a different media query for screen width but we're pretty much always going to use viewport width for layout purposes. It's kind of easy to get the min and max confused.

I always think that mins should refer to the smaller screen size and max to larger, but it's the other way around because min means minimum of and max means maximum of. If you get them confused like I do, you'll figure it out pretty quick when then media query that you write works in the wrong direction and you can just switch it to the other one. So our query, minimum width of 600 pixels. You can use other units of measurement here like Ms or REMs. Next you have curly brackets from line eight to line 10 here that enclose the entire media query, the different styles that are applied.

This is a little tricky because you have the curly brackets around the whole media query but you also have curly brackets in each style declaration. So double-check that you have your brackets matching up or you could throw off the whole rest of your style sheet. You'll have two at the end. You'll have one to close off the last declaration and then another to close the media query. So inside those media query brackets, you have whatever style you want to apply that should only apply if the declaration is true. So we could add another declaration here.

For example, I could have paragraph and then color red and that will also apply only when that media query is true. You could have as many style declarations inside there as you'd like. You can also have more than one media query in the same style sheet. For example, perhaps you want the background color to change to gray when the viewport is wider than 900 pixels. So I'm going to go down here and add another media query. @media min-width 900 pixels.

Then add my brackets. Inside it will be body background color gray and save. So if I go over here and refresh, right now it's less than 900 but when it goes to more than 900, the background color changes to gray. The browser will evaluate each media query independently. So for at or on 700 pixels, such as here, the first one as we're more than the minimum 600 but the second is false as we're not more than the minimum of 900.

So only the styles from the first media query are applied. So if we go up to say 100 pixels for our viewport width, now both of those media queries are true because a thousand is more than 600 and it's also more than 900. So the styles in both are going to be applied to the page. Since we have two different styles for the background color of the body that are now being applied, the browser will do the same thing it would do if they weren't in media queries. It uses the one that's last as it goes through all the styles. Our paragraph style will still be red as specified in the first media query because there's nothing in the second media query that would override it.

Now you can technically put the media queries in your style sheet in any order but since more than one may be true at any given point, you have to be careful that you're not overriding a style that you meant to apply. So for example, let's say we switch these around. I'm just going to cut and paste the second one and put it above the first one like this and save, go over here, and refresh. So we're fine when we're less than 600. There's no background color. More than 600, the background color is blue.

But if we go wider than 900, it's not going to be gray like we want it to be and that's because looking at both of these media queries, they're both true but the second one is the one that will take effect because it always looks at the CSS that's later on in the style sheet. Generally if you're designing from narrow viewport width to wider, you'll want to use minimum width as we do here and put the narrower styles first in your style sheet. If you're designing from wide to narrow, that is starting out with the styles for the widest viewport width, then you should use max-width.