17. Media Query basics - Responsive CSS Tutorial

Key Takeaways

We're in a module of course. It's all about trying to think responsively and one of the most important things to building a responsive layout is understanding media queries. Uh so we've been looking at this big screen layout, but we want to be able to make this work at small screens and to be able to do that we need to know how media queries work. So you might be asking what is a media query? Well, it's this feature in CSS that lets us add new styles to target only specific conditions. So the basic syntax of a media query looks something like this uh but there are a few other things that we do need to include in here for it to actually do something. So the first one is the media type and we can also include media features. So media features are certain things about the media type that we're looking at. So we can be very specific with the situations that we're trying to target to put in additional CSS. The media type itself, it lets us target different types of media as the name implies. We have a screen, so we can target our screens specifically. So I can write at media screen. We also have print and I said there was a third one, so the third one is speech. Under media conditions, those let us target specific conditions within that media type. They include widths, so you can do something like at media min-width 600 pixels. Orientation, so you can actually say like I want an orientation landscape or portrait. Uh you can also look for specific features of that device like hover. Can that user's primary input device actually hover? So are they using a mouse or are they not? You might be on a tablet and then the our browser actually will know that you're not using a mouse and that you can't really hover. So you can actually put right specific CSS that targets only devices where you have that or maybe where you don't have that ability. So that's really really cool that we can do that. Um both media types and conditions are optional. So you don't have to include both all the time, but you do need to have one or the other cuz if you don't have a type or condition, it's kind of useless, right? Then we're not targeting anything. Um so we do want to always have one or the other. So for example, we can target only screens. So I could say at media screen and have some some styles there or maybe more commonly it would be at media print. And you might be going what why would why would you target print? We're we're building a website. And you're right, but let's say you had a recipe website and you wanted to make it so if somebody hit command P, they could actually print out the recipe directions really well. I'm sure you've also seen these recipe websites where it's like 10,000 words before you actually see the recipe. You could you could actually like literally make all of that through CSS disappear and only have the recipe itself show up and you could format it perfectly to print on the page and people would love you for that. So something really cool you could do through a media query and some CSS. Um we can also choose only a condition such as the width of the viewport. So if I don't include the media type and I just put the condition, it's actually defaulting to a media type of all. So it's just going to look at all media that have a minimum width of 960 pixels in this case. The one thing that's really important is if you want to combine a type and the condition with it, you actually have to use the word and. So we would write something like this. at media screen and min-width of 960 pixels. Really quickly one more here. You might also see times where there's the only word in there. Don't worry about it. It was for old browsers. We don't have to worry about it too much these days. We can literally just write screen. Um another example here would be screen and orientation portrait. For now, we're really going to be focused on the sizes. So we're not going to worry too much about some other stuff. We're all going to take a look at um orientation in this video as well though, but for this course, the focus is on min and max width and making sure we understand those because those are the ones that we'll be using the most often. And let's start with a really really really basic example. And this is not a realistic example, but it's the type of example that sort of hammers home exactly how these actually work. So let's give this a background that is pink. And if we come and take a look at it, well now my my website has a pink background. Um well that's all right. But let's come in here and write a media query. So I'm going to do at media. I'm going to do my opening close parentheses and then I'm going to do my squiggly braces. So we come into here and I'm going to use my min-width. min-width of 400 pixels, which is pretty small, but again this is just a really basic example. So if you remember, this is the same as saying all and minimum width of 400 pixels. We don't we really don't need to bother with that, so we can just have our media condition here of 400 pixels for all of our media types. And let's change our background color. Now one thing I I I do this all the time, but I'll just write background here. Um but this doesn't work and then you go whoops. Uh Um the reason that doesn't work is because we need to tell it well what are we changing the background of? So you literally have to come and write your selector again. And this looks a little bit weird when you're not used to it that we have this like nesting inside of CSS. In HTML, we're used to seeing nesting, but in CSS it can look a little strange. Um we just have to get used to it though cuz that's how it works. So I have my media query opening close curly braces and then I have my body selector inside of there. And I can say that the background here is let's change it over to purple. So now if I come and take a look at small screens, it will be pink and then when I pass a certain width, it will be purple. So what's happening is this here is saying from a minimum width of 400 pixels and bigger from that size and bigger because it's starting at that minimum width. And we can do another one here. Let's say an at media minimum width 650 pixels and we can say on this one my body has a background of orange. So let's go take a look again. Let's go smaller. So at really small screens, it's going to our default pink. That's just like well when I say default pink, I just mean like the original style on my body of pink. Then as we make it bigger, oh we're getting over to that minimum width of 400 pixels and then as we keep getting bigger, we're going to hit there's my 650 pixels and then it will stay that color for as long as we're there. So that is the basics of how it works. Now one thing that's really important here is let's bring this comment down here and put 650. Uh because the order of these is really really important and this goes back to a little bit the same way if you remember when we were looking at the pseudo classes for our links, a link, a hover, a visited, a active, all of those. Um you could actually be in more than one of those states at a time cuz if you're clicking on something, it's active, but you're also hovering over it. So the order that you put those selectors in changed if what you were actually wanted would would kick in, right? So it's the same thing here. So if I move this one up to here, it's just it's just always going to be purple. So let's go take a look. It's purple. And it's purple and it's purple and then it's pink. This completely gets skipped over because it's looking at this and it's saying from a minimum width of 650 pixels and bigger. But well this condition matches you know this is 400 and bigger. So 400 and bigger includes 650 and bigger. So it goes here, but then it goes oh well, it's the same as if I had here my paragraphs should be red color red and then I said my paragraphs should be color yellow. Well yellow's going to win because yellow is second here. So if we come and look, my my paragraphs are yellow. Which we don't want to do, but it's the same concept that's coming here. This is true and this is true, so I'm going to take the second one. So the order is really really important. Now one thing you can actually do, which we didn't see in the slides, you can combine two different media conditions as well. So I could also write an and here and say a max width of 649 pixels. So now we've this CSS will only work between 400 pixels and 649 pixels. So now if we go and take a look, we will still get our purple, but we will also get our orange afterwards because this no longer works once we get to above 649. A max width is always from zero until this is a maximum width of So that's also really really important. So from a minimum width of 400 pixels up to a width of 649 pixels. Now I'm going to do one more. I'm going to not going to delete this. I'm just going to comment it out. Um and I do want to look at this, but I'm going to change the number in here cuz it's going to make it a little bit easier to uh play with. So let's just bring this down to 500 pixels. So right now we have the pink background which will switch over to orange when we hit that specific screen size. So pink over to orange. I said we're going to focus on min and max width, but I just do want to look at orientation a little bit. So orientation and I'm going to make this one landscape. So a landscape orientation with something is some when something is wider than it is tall and you have portrait which is when it's taller than it is wide. So if we have the orientation of landscape on there, we can see it's pink it's pink it's pink. Oh, well now we have it as orange because you can see that it's wider than it is tall. But let's find that little ground here. So here, you can see actually when I'm switching only the height and not the width that it's actually switching between the two of them cuz right now it's wider than it is tall and now it's taller than it is wide. So we can actually have CSS that looks at the viewport height and width and applies certain rules too, which can be really really interesting. So it can also help when you're dealing with like tablets or phones and when people are moving things around um in the orientation. You can even look at specific aspect ratios. There's a whole bunch of extra stuff that I didn't even really mention that I'll link to in the notes of this lesson. Uh it's on the MDM page, but I don't really want you to take a deep dive into that cuz it can seem awfully confusing, but I do want to make you aware that media queries you can do a whole bunch of stuff with it. It's actually really really powerful. What I'd really encourage you to do now is to play around a little bit with what we have here and I'm going to take this one off actually and I'll turn this one back on. Um play around with this. We're going to be using media queries a lot in the project we're working on from now on, but I'd really like you to play around with it a little bit to make sure that you're comfortable with them because they're super super important to understand. And when you're feeling a bit more comfortable with it, you can jump into the next video where we're going to be applying all of this into the project that we've been working on.