Relative Units

Often the first way new developers to measure things on the screen is in pixels. 0:00 In today’s world of varying pixel density and vastly different screen sizes, 0:06 using pixels to describe the size of elements on a webpage makes less sense. 0:11 In this video, we’ll get familiar with a few different 0:15 relative units of measurement that we can use in CSS. 0:18 We'll go a handful of useful units for having your toolbox. 0:23 Understanding the differences between them will help us make 0:27 better choices when constructing truly responsive websites. 0:30 And let's start with the unit. 0:33 The name comes from traditional typography 0:37 where it reference the width of the capital M in the given typeface. 0:39 If you're ever taken a course on responsive web design you've probably seen 0:44 this expression, target divided by context equals result. 0:49 The is a relative unit often used to specify font size. 0:54 But there's a bit of a catch. 0:59 The multiplier cascades. 1:01 So, if I use ems to set the font size 1:04 of an element that's three levels deep in the markup hierarchy, I need to pay 1:07 attention to which of those elements use ems to define their font size. 1:12 Rather than multiplying by the root font size, which is usually set to 16 pixels, 1:16 I might end up multiplying two or three times. 1:23 Notice here that my paragraphs have a font size of 1em but 1:26 my outer, middle and inner divs, also have a font size of 2ems. 1:31 The result looks something like this. 1:37 Despite the two paragraphs having the same font size, 1:42 the one inside of other elements also using the unit is much much bigger. 1:44 The rem even makes this a little bit easier. 1:52 Rems are always based on the root. 1:56 So you don't have to worry about tracking how the effects might stack, 1:59 because all your multipliers are based on the same value. 2:03 If we use rems instead of ems in this same example, 2:06 all the text will be the same size. 2:10 A quick note on this CH or character unit. 2:13 It represents the width of the zero character in the current font. 2:16 Since the sizing is dependent on the font itself, 2:21 this unit gives us the potential to base the widths of 2:24 elements on a desired number of characters assuming a fixed width type phase. 2:26 See the teacher's notes for more information and an interactive demo. 2:32 In addition to basing lengths on font size, we can set them as a percentage of 2:37 the view port, the area in the browser that's used to display the webpage. 2:42 The units VW, or viewport width, and VH, or viewport height, 2:46 represents a percentage of the viewport width and height, respectively. 2:51 It works similarly to percentage. 2:57 Whereas percentage is based on an element's parent though, VW and 3:00 VH remain stable within a single viewer. 3:05 Let's use this demo-box div as an example. 3:08 We'll comment this out for now. 3:13 First, I'll target my demo-box class. 3:17 Since my demo-box doesn't have any content, 3:24 I'll give it a background color so we can see it. 3:29 Now, I'll set the width and the height based on a percentage of the width and 3:35 height of the viewport. 3:39 Let's save and check this out in a browser. 3:49 Now we can see that our demo-box has exactly 3:57 half the height of the viewport and half the width of the viewport. 4:00 Each of these dimensions 4:06 will scale with the page. 4:11 The vmin and vmax units work in a similar fashion. 4:15 In the case of vmin, the value assigned will be a percentage 4:20 of whatever is smaller, the viewport width or height. 4:23 vmax works in the opposite way. 4:27 It will be a percentage of whichever is bigger. 4:30 Note that viewport units aren't fully supported by quite 4:33 all of the major browsers. 4:36 At the time of this recording, check out caniuse.com for 4:38 the state of browser support for these and any other features you're not sure of. 4:41 I've added some links in the teachers notes, so be sure to check those out for 4:45 more information. 4:49 This also allows for some finer control over our web typography. 4:50 Rather then setting the width of my h1 element to a percentage of the width of 4:55 it's parent, I can make the font size scale with the page. 4:59 The vmin and vmax units work in a similar fashion. 5:26 In the case of vmin, the value assigned will be a percentage of whatever is 5:31 smaller, the viewport width or height. 5:35 vmax works in the opposite way, it will be a percentage of whichever is bigger. 5:37 Note that the viewport units aren't really supported by quite 5:43 all of the major browsers at the time 0f this recording. 5:47 Check out caniuse.com for the state of browser support for 5:49 these and any other features you're not sure of. 5:53 I've added some links in the teacher's notes, so be sure to check those out for 5:56 more information. 6:00