Media Query Review7:17 with Nick Pettit
Media queries are CSS rules that help us include CSS code only when certain conditions are met. These conditions are called media features, and in the case of responsive web design, the media feature most commonly used is width, or more specifically, min-width.
[MUSIC] 0:00 By now, you've probably already used media queries in a few projects. 0:04 But it's hard to talk about responsive web design without building a solid 0:08 understanding of media queries. 0:13 Of course, media queries are CSS rules that help us 0:15 include CSS code only when certain conditions are met. 0:19 These conditions are called media features. 0:23 And in the case of responsive web design, the media feature most commonly used 0:26 is width, or more specifically, min or minimum width. 0:31 Something you might not realize is that media queries actually come with 0:37 many media features, and that width is just one of them. 0:41 Let's head over to the Mozilla Developer Network to check out the documentation for 0:46 some media features in media queries. 0:51 So here I have the MDN documentation for 0:55 media queries, and we're looking at the section called media features. 1:00 So in addition to width, which we can pull up just by clicking right there, 1:05 there are several other media features, and 1:11 they're all listed out here on the left side. 1:14 Now, most of these you won't actually need to use. 1:18 But one of them that I would like to draw to your attention is orientation. 1:22 So some of these are useful in very specific instances, 1:29 but orientation is pretty useful when dealing with mobile devices. 1:34 And you can detect whether or not the device is in landscape or 1:40 portrait mode. 1:45 Detecting width is a great start, but if a user decides to browse on a mobile device 1:49 in landscape mode, some layouts might not take advantage of the extra width, 1:54 requiring more scrolling than is desirable. 2:00 Scrolling is common when a mobile layout is reduced to one column, but 2:04 heavy scrolling is less than ideal when in landscape. 2:08 For these lessons, I've created some examples to help isolate these concepts. 2:13 I've used the initializer project and modified it to get started, 2:18 but if you'd like to check out the initializer project yourself, 2:23 you can find a link in the notes associated with this video. 2:27 Now let's take a look at an example of orientation in Workspaces. 2:31 So here I have a very simple layout. 2:37 And before we take a look at the code, let's actually go to the preview and 2:41 see what that looks like. 2:46 So like I said, that's a pretty simple layout. 2:48 We have a title up here. 2:50 We have some tabs. 2:51 There's two columns, and if I scroll down, there's a footer down at the bottom. 2:53 Now I can resize this, and you'll notice that the media queries start to 2:59 kick in right away and make some small changes. 3:03 And then as the layout starts to break down, 3:07 some more dramatic changes occur where we go to a single-column layout. 3:11 And then as we keep going and the tabs don't really work anymore, 3:16 they will flip over to this vertical layout. 3:22 So let me resize this and let's go back to our workspace here. 3:27 It's pretty simple HTML, nothing you shouldn't already be familiar with. 3:34 We have a div, which is the header container, and 3:38 then we have a header inside of that with an h1 and some navigation. 3:42 And then we also have this container area, where there is an article. 3:49 And then there's also an aside, and 3:56 then finally down at the bottom, we have a footer. 4:00 So the markup is pretty straightforward. 4:04 Let's take a look at the CSS quickly. 4:07 And here we have just some basic styling. 4:09 We're use box-sizing border-box for pretty much everything. 4:12 Remember, these are going to be our mobile styles 4:18 first because we're using a mobile first approach. 4:22 And then as we work our way up to larger sizes, 4:27 that's when our media queries will start to kick in. 4:30 So first, at that small mobile size, we go from that list to our tabbed layout. 4:33 And then from there, we go from a single column to a multi-column layout. 4:41 And then finally, we just make a few more adjustments for larger screen sizes. 4:46 And down at the bottom, we just have this quick clearfix here. 4:52 Now, one of the problems with this and one of the problems that orientation can fix 4:56 is that in landscape mode, we end up getting a layout that is less than ideal. 5:02 So let's take a look at this on a mobile device. 5:07 [SOUND] So when I'm in portrait mode, this looks just fine. 5:10 But when I [SOUND] go to landscape, 5:14 the header takes up a pretty large amount of a screen, 5:17 and it creates unnecessary scrolling. 5:22 So let's see if we can take one of the media queries we already have and 5:26 apply some orientation to get a better layout in landscape. 5:31 So specifically, I'm going to take this media query right here, 5:36 and we can have multiple media queries just by adding a comma. 5:41 And so, if this media query is true or the second media query that 5:47 I'm about to write is true, then we'll get this code applied. 5:52 So let's write our second media query here. 5:56 So we'll say only screen. 5:59 So it's screen layouts and not something like print. 6:03 And then we'll use the Boolean operator and, and we'll say, 6:08 min width is about 700 pixels 6:11 because we want to try to hit that landscape layout. 6:17 And I'm on an iPhone 6 Plus here, but 6:21 different screen sizes will vary, so be sure to experiment with that. 6:24 And then I'll have another Boolean operator there, 6:29 and I'll say and orientation, landscape. 6:34 And in this case, Workspaces is not recognizing these keywords, 6:39 but that's just fine. 6:43 We know that they work in a browser. 6:44 So I'll save that out. 6:46 And now if we switch back to our phone here, and I have it in landscape, 6:48 and I refresh the page, you'll see that we get a layout that is much more ideal and 6:54 better suited to this large landscape layout. 7:01 That's just one way that we can make use of more advanced media queries. 7:06 I've included a link to the documentation in the notes so 7:11 that you can read more on your own. 7:14
You need to sign up for Treehouse in order to download course files.Sign up