Media Query Basics

These days one of the most important responsibilities we have as web 0:00 designers or front-end developers is being able to 0:03 define how content is presented on different devices. 0:06 Fortunately, CSS media queries have given us a convenient way of 0:10 targeting different devices, resolutions, browser dimensions, and more. 0:13 So, we're able to tailor our content to a wide range of devices without having to 0:17 change any of the actual content because it's all controlled within the CSS. 0:22 With just a few media queries, we're able to enhance the browsing experience of 0:27 websites on multiple devices and viewport sizes, because our content can respond or 0:31 adapt to the device that's displaying it. 0:36 Now there are a few ways we can include media queries in our pages but 0:39 we're going to use the most common method which is adding the media 0:43 query rules directly in our CSS. 0:46 So, the first thing I'm going to do is copy this top comment, 0:49 then scroll down to the bottom of our style sheet, and 0:53 let's add some space right below the float clearfix and I'll paste comment, 0:57 and then I'm going to change it so it reads media queries. 1:04 So a media query is simply a style block containing one or various conditions. 1:12 And, if those conditions are true, the media query takes effect. 1:18 If they're false, the browser or device ignores them. 1:21 So, let's take a look at what makes up a media query. 1:24 To create our first media query, we'll type @ media, 1:27 followed by a set of parentheses, then a set of curly braces. 1:32 So the at media rule is what specifies the media type we want to target. 1:37 And there are a few recognized media types we can use so 1:43 that we're able to create CSS and serve it specifically to any of those media types. 1:46 So, for example, the all media type targets all devices. 1:51 There's also a media type for Print, Green, even one for Speech. 1:56 So we want our media queries to affect all devices and 2:02 computer screens, so, we'll want to go with the all media type. 2:05 So, right after the at media statement, let's type All. 2:09 Now All is the default media type for media queries. 2:14 So we can actually omit it from our media statement if we want to. 2:18 So remember, if you don't define a media type, the All type will be implied. 2:22 So now, we will need to write an expression inside the parenthesis that 2:27 will check for those true or false conditions I mentioned earlier. 2:31 So first, we need to define the media feature we are testing for. 2:35 Some of the media features we can use are width, height. 2:40 We can also check for things like max-width, 2:43 max-height, also a device's orientation and a few other features. 2:46 So we're going to use the max-width media feature to check for 2:50 the max-width of the browser's viewport. 2:55 Then, we're gonna follow that with a colon and 2:58 define a pixel based value of 960 pixels. 3:01 But we can also make this a percentage value, an M value or any linked unit. 3:06 Now, one important thing to keep in mind, 3:11 is that we don't need to include a semi colon after the value. 3:12 Otherwise, the entire media query is ignored. 3:17 I know it's a common mistake to make because we're so 3:21 used to adding a semicolon after every CSS declaration. 3:23 So, make sure to keep those semi-colons out of the media feature expressions. 3:26 So this expression will query the max-width of the display area, 3:31 which in our case is the browser's E-port. 3:37 So with this media query in place, we can create subtle or 3:40 drastic changes in the layout or appearance of 3:43 our website whenever the browsers viewport is at or below 960 pixels. 3:46 And we can do that with regular CSS rules. 3:52 So, inside the media query Rule, let's target the body of the page 3:55 using the body type selector that inside the body rule. 4:01 Let's add a background property and 4:05 set the background value to the color royal blue [SOUND]. 4:09 And right below the body rule, 4:13 let's target all paragraphs on the page with the P selector. 4:15 Let's give it a color property and set the color value to white. 4:21 So let's save our style sheet and refresh the browser. 4:25 So now we can see how those colors are applied to the body and 4:30 paragraphs whenever the browser width is resized. 4:34 So right when the view port hits that 960 pixel width, 4:38 the colors change and they remain that way as the browser gets narrower. 4:42 But once we're at anything wider than 961 pixels, 4:48 they change back to their original colors. 4:52 So let's go back to our style sheet and add another media query. 4:56 So right beneath the media query we just wrote, 5:00 let's create a new one by writing @media. 5:03 And once again, we're going to use the max-width media feature but 5:07 this time we're gonna set the value to 480 pixels. 5:12 [BLANK_AUDIO] 5:15 So inside the new media query rule, let's once again target body element. 5:20 And inside the body rule, we'll add a background property. 5:27 And this time, lets set the background to the color value dark red. 5:31 Okay. 5:36 Now, when we save our style sheet and refresh browser, notice how the background 5:36 color still turns blue and the paragraph colors change to white at 960 pixels. 5:43 But once the view port is equal to or 5:50 below 480 pixels, the background color turns dark red. 5:52 And notice how the paragraph's font colors still remain white 5:57 even though we didn't specify it In the new media query. 6:01 Well, the color values still apply because the conditions we've 6:05 set in the top media query are still true. 6:08 The view port width is still less than 960 pixels. 6:12 So unless we override it with a new property, 6:16 like we did here with background, the text color will remain white. 6:19 But if we want to define certain styles only at a certain range of viewport sizes, 6:24 well, what's great about media queries is that we're able to add or 6:29 combine expressions if we need to get more specific about a device or 6:32 a viewport range. 6:37 So let's add one more media query in our style sheet by typing @media. 6:39 And this time, we're gonna use the min width media feature and 6:44 the value is going to be 481 pixels. 6:49 Now, after the set of parenthesis we're gonna type the word and 6:53 followed by a new set of parentheses. 6:57 And in this expression, we're going to use the max width media feature and 7:00 set the value to 700 pixels. 7:06 So in this media query the and 7:12 operator is combining these two expressions between the parentheses. 7:15 So, when the device or view port is between the range of 481 pixels and 7:20 700 pixels, it's going to display the styles we're about to write. 7:27 So inside our new media query rule let's once again target the body 7:31 element with the body selector, and we're going to add a background property, and 7:35 this time we're going to set the background to the color sea green, and 7:41 let's remove the p rule from our first media query. 7:46 I'll simply select and cut it out of the media query. 7:49 Then we're gonna use it in our new media query, 7:53 so right below the body rule I'll paste in the new media query. 7:55 Alright,. . 8:00 So, let's save our style sheet and go back to the browser and refresh the page. 8:00 So now, when we resize our browser, notice how the green background and 8:05 white text color are only applied between the max width of 700 pixels and 8:11 minimum width of 481 pixels. 8:17 So when the view port is between 481 pixels and 700 pixels. 8:20 Okay. So, 8:28 now that we have the Media Query basics down, 8:28 we'll see how we can use this logic to enhance our final layout. 8:31