Media Query Review

[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