Preview
Video Player
00:00
00:00
Viewport Units
4:43Getting better at CSS means building layouts that respond to changes in the browser’s viewport, or the area in which window content can be seen. For example, if the user is using a mobile device, you might want a certain part of the page to be styled differently depending on whether the device is in portrait or landscape format. CSS provides a variety of ways to adjust your layout for different viewports, including a measurement called a viewport unit that’s based on viewport size. Let’s take a look at what Viewport Units are all about.
Getting better at CSS means building
layouts that respond to changes in
0:00
the browser's viewpoint, or the area
in which window content can be seen.
0:05
For example,
if the user is using a mobile device,
0:10
you might want a certain part of
the page to be styled differently,
0:14
depending on whether the device is
in portrait or landscape format.
0:19
CSS provides a variety of ways to adjust
your layout for different viewports,
0:24
including a measurement called a viewport
unit that's based on viewport size.
0:30
Let's take a look at what
viewport units are all about.
0:37
The CSS property vw is short for
viewport width.
0:42
1vw represents 1% of
the overall viewport width.
0:48
If we think about how
much 10vw represents,
0:54
the answer depends on
the width of the viewport.
0:57
An older phone in portrait
orientation measures 320
1:02
pixels across, so
10vw would equal 32 pixels.
1:07
On the laptop I use to develop websites,
1:13
the screen is 1440 pixels wide, so
1:17
10vw equals 144 pixels when
my browser is maximized.
1:21
Vh is short for viewpoint height, and
1:28
is measured relative to
the height of the viewpoint.
1:31
Since my laptop viewpoint is
900 pixels tall when maximized,
1:35
10vh would equal 90 pixels.
1:41
Let's say developer Diane was looking for
a more impressive header,
1:46
one that was 25% of
the height of the viewport.
1:51
This is where the vh unit is useful.
1:55
Try dragging your browser around,
making the viewport taller and
2:05
shorter, and seeing how the height
of the header adjusts accordingly.
2:09
Measurements higher than
100vh are acceptable.
2:18
If we try setting the height
of our header to say 125vh,
2:21
we'll see that the header
is actually taller than
2:27
the total height of the viewport by 25%.
2:31
I'm going to undo that and
set the header height back to 25vh.
2:35
What if we wanted our section element
to be the full height of the screen?
2:43
We can see that sort of worked.
3:10
Each of the sections in Diane's blog
post matches the height of the browser,
3:13
and has an azure background and
a gray dotted border at the bottom.
3:18
But in sections with lengthier passages
of text, some of our sections overlap.
3:24
What do you think?
3:31
Any idea what's causing this issue or
how we could fix it?
3:32
Notice that the section with the most text
grows taller than the height of the mobile
3:39
viewport.
3:44
We told the browser to make this section
100% of the height of the screen.
3:45
But sometimes that's not tall
enough to fit all the content.
3:51
If you said, why don't we switch
our height property to min-height,
3:57
then you're doing awesome.
4:01
Now our sections will be at least
the height of the screen, or
4:06
else the height of the content,
whichever is taller.
4:10
And our section content should be legible
on both desktop and mobile screens.
4:14
Building responsive layouts involves
a lot of thinking and planning.
4:27
And there are some critical CSS
techniques you haven't learned yet.
4:32
But knowing how to base your
measurements on the size of the viewport
4:36
is an excellent start.
4:40