Often the first way new developers to measure things on the screen is in pixels.

In today’s world of varying pixel density and vastly different screen sizes,

using pixels to describe the size of elements on a webpage makes less sense.

In this video, we’ll get familiar with a few different

relative units of measurement that we can use in CSS.

We'll go a handful of useful units for having your toolbox.

Understanding the differences between them will help us make

better choices when constructing truly responsive websites.

And let's start with the unit.

The name comes from traditional typography

where it reference the width of the capital M in the given typeface.

If you're ever taken a course on responsive web design you've probably seen

this expression, target divided by context equals result.

The is a relative unit often used to specify font size.

But there's a bit of a catch.

The multiplier cascades.

So, if I use ems to set the font size

of an element that's three levels deep in the markup hierarchy, I need to pay

attention to which of those elements use ems to define their font size.

Rather than multiplying by the root font size, which is usually set to 16 pixels,

I might end up multiplying two or three times.

Notice here that my paragraphs have a font size of 1em but

my outer, middle and inner divs, also have a font size of 2ems.

The result looks something like this.

Despite the two paragraphs having the same font size,

the one inside of other elements also using the unit is much much bigger.

The rem even makes this a little bit easier.

Rems are always based on the root.

So you don't have to worry about tracking how the effects might stack,

because all your multipliers are based on the same value.

If we use rems instead of ems in this same example,

all the text will be the same size.

A quick note on this CH or character unit.

It represents the width of the zero character in the current font.

Since the sizing is dependent on the font itself,

this unit gives us the potential to base the widths of

elements on a desired number of characters assuming a fixed width type phase.

See the teacher's notes for more information and an interactive demo.

In addition to basing lengths on font size, we can set them as a percentage of

the view port, the area in the browser that's used to display the webpage.

The units VW, or viewport width, and VH, or viewport height,

represents a percentage of the viewport width and height, respectively.

It works similarly to percentage.

Whereas percentage is based on an element's parent though, VW and

VH remain stable within a single viewer.

Let's use this demo-box div as an example.

We'll comment this out for now.

First, I'll target my demo-box class.

Since my demo-box doesn't have any content,

I'll give it a background color so we can see it.

Now, I'll set the width and the height based on a percentage of the width and

height of the viewport.

Let's save and check this out in a browser.

Now we can see that our demo-box has exactly

half the height of the viewport and half the width of the viewport.

Each of these dimensions

will scale with the page.

The vmin and vmax units work in a similar fashion.

In the case of vmin, the value assigned will be a percentage

of whatever is smaller, the viewport width or height.

vmax works in the opposite way.

It will be a percentage of whichever is bigger.

Note that viewport units aren't fully supported by quite

all of the major browsers.

At the time of this recording, check out caniuse.com for

the state of browser support for these and any other features you're not sure of.

I've added some links in the teachers notes, so be sure to check those out for

more information.

This also allows for some finer control over our web typography.

Rather then setting the width of my h1 element to a percentage of the width of

it's parent, I can make the font size scale with the page.

The vmin and vmax units work in a similar fashion.

In the case of vmin, the value assigned will be a percentage of whatever is

smaller, the viewport width or height.

vmax works in the opposite way, it will be a percentage of whichever is bigger.

Note that the viewport units aren't really supported by quite

all of the major browsers at the time 0f this recording.

Check out caniuse.com for the state of browser support for

these and any other features you're not sure of.

I've added some links in the teacher's notes, so be sure to check those out for

more information.