Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Often, the first way new developers learn 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.
Resource
Further Reading
The Lengths of CSS
A Look at Length Units in CSS
CSS Character Units CodePen, by Wes Bos
Relative Units:
- Em
- Rem
- Vh
- Vw
- ch
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up