Media Queries

Quick reference

• 00:05 In this video, I wanna talk about media queries.
• 00:08 A media query, if we come up here to our more tools, we looked at this earlier, and
• 00:12 developer tools, we can see, this is the Galaxy 6.
• 00:15 Its screen is 360 x 640.
• 00:20 This is an iPhone 6.
• 00:21 It's screen is 375 x 667.
• 00:23 And then, here's an iPad, it's screen is 768 x 1024, right?
• 00:29 So, all of these devices have different size screens.
• 00:33 And that's what a media query is.
• 00:35 It's saying what size screen am I dealing with?
• 00:38 You have to design your mobile first application
• 00:41 to look different on each of these devices.
• 00:43 And we do that with media queries.
• 00:45 And media queries let us designate widths right?
• 00:48 So, let's get rid of this and come back here and look at our CSS.
• 00:52 Now this is sort of a subtle thing you're gonna have to wrap you brain around It's
• 00:56 not too bad, but it's kind of clever, right?
• 00:59 So what we're gonna do here is we saw earlier when we defined all of
• 01:03 our columns, 1 through 12, 1 column width is 8.3, 12 of them is 100%,
• 01:08 7 of them is 8.3 times 7 and on and on and on.
• 01:12 Well, we did this thing here and we haven't seen this before.
• 01:15 This is where a little bit kinda almost like logic, it saying all of these classes
• 01:19 that have this col- in their name do this too.
• 01:24 So every one of these col- whatever 1, 2,
• 01:28 3, whatever it's gonna Grab this, and basically what it's gonna do is,
• 01:35 it's gonna do this, and it's gonna do this.
• 01:41 So, it's pushing in this stuff in each one of these guys right.
• 01:49 Let's change this back real quick.
• 01:51 So, it's sort of like a shorthand.
• 01:53 Well, if we look down here at our media query and
• 01:56 this is what a media query looks like.
• 01:57 It uses this at media sign and then only screen and you set your max-width 768.
• 02:03 Now, you should probably do this for
• 02:05 all the different devices if you want it to look different.
• 02:07 But we want up to 768, which is what the iPad, up to that width.
• 02:14 We wanna do this CSS, right?
• 02:17 So what is this CSS?
• 02:18 We're doing this same thing again that we did up here.
• 02:22 But up here these widths are gonna equal what each one of these widths are.
• 02:25 So this one is 50% for column 6, column 11 is 91% and on and on.
• 02:31 Down here in our media query, we're saying no, no, override that,
• 02:35 instead put the width at 100%.
• 02:38 So why?
• 02:38 Why would we do that?
• 02:40 Well think about this.
• 02:41 If we come back here, hit reload, and we resize our screen, what are we saying?
• 02:47 After we hit 768, which is right around there, it's saying for
• 02:49 all of these things make them 100% the size of the screen.
• 02:52 Whereas before, they were only 8.3%, right?
• 02:57 Now we want them to be 100%, and that's what bops them all across and
• 03:01 gives them that interesting look.
• 03:03 Same thing down here.
• 03:04 This is called -9, instead of that being,
• 03:08 what did it used to be, is pull this out, and it used to be 75%.
• 03:13 Well now when we resize that, boom, it's becoming 100%.
• 03:19 It's taking up 100% of the viewport of the viewing space
• 03:24 of our device for everything up to and below 768.
• 03:28 So anyway that’s media query, that’s the crux of this whole thing.
• 03:31 And whenever we put these in we call this a breakpoint.
• 03:35 So for all the different sizes the max widths we want to put in here,
• 03:39 each one of those would be a breakpoint.
• 03:41 And you can get real specific and do for every type of mobile device,
• 03:44 specific things, so if you want the iPad to look specifically a certain way,
• 03:49 you could designate that right here.
• 03:51 If you want your Nexus 5 phones to look a certain way,
• 03:54 you could designate it right here.
• 03:56 So as long as you have this width equal to 100, you're good to go.
• 03:59 So, that is media query ir'a very important and that's all for this video.

Lesson notes are only available for subscribers.