Up next in 10
Learn Every CSS Viewport Unit In 10 Minutes
2K views
Feb 7, 2024
"Learn Every CSS Viewport Unit In 10 Minutes" is an instructional video aimed at teaching viewers about CSS viewport units – vw, vh, vmin, and vmax – in a concise manner. Throughout the video, viewers are guided through each viewport unit, learning how to use them effectively to create responsive and flexible layouts for web design projects. The tutorial covers essential concepts such as understanding how viewport units relate to the size of the browser window, as well as practical examples demonstrating their application in various scenarios. By following clear demonstrations and explanations, viewers gain a comprehensive understanding of how to leverage viewport units to build visually appealing and adaptable web layouts. Whether you're a beginner exploring CSS techniques or an experienced developer looking to expand your knowledge, this tutorial provides valuable insights into mastering CSS viewport units in just 10 minutes.
View Video Transcript
0:00
Did you know that there are 24 different viewport units you can use in CSS
0:05
There are simple ones like VH and VW, but they get pretty complicated with things like SVI and DVB
0:11
In this video, I'm going to be talking about all 24 different viewport units, how you can categorize them
0:16
and which ones you want to use for specific situations. Welcome back to WebDev Simplified
0:24
My name's Kyle, and my job is to simplify the web for you so you can start building your Dream Project Center
0:28
and today we're going to be talking all about viewport units. Now on the right hand side of my screen, I have my phone connected to my computer
0:34
so all the changes I make on my phone you'll be able to see on this right hand side of the screen. And on the left, we have the actual code for our application
0:40
And this code is very straightforward. We just have some HTML that has a container, which is wrapping four separate boxes
0:46
And then we're importing a style sheet, and this container is just using Flexbox. My body, I gave a height of 150 VH, which is a unit we're going to talk about in this video
0:54
and that's just so I can scroll this box for certain demos. And then finally, I gave our boxes some colors, so when we add content and such to them, we'll be able to see those four different boxes on our screen
1:04
Now, the reason I'm actually using my phone instead of like a desktop window for this is because many of these new viewport units that were added to CSS specifically are meant for dealing with things on a mobile device that you don't actually get on a desktop device
1:17
Also, for this demo, I'm going to be using Firefox on my phone, and the reason for that is that Chrome does not support these new viewport units yet
1:24
These are all relatively new, so browser support is really not that great yet. but I'm hoping these are going to be added pretty quickly because they're fairly simple things to add to the browser
1:31
compared to some of the other more complex features. Now already you can see that I'm using this height of 150 VH on my body
1:38
and this is actually one of the viewport units, and the first two viewport units I want to talk about are going to be VH and VW
1:45
So on this box one right here, I want to just set my width to 50 VW
1:49
I want to set my height to 50 VW, and we're going to save that, and you'll see over here on the right-hand side, we get a box that is essentially a square
1:57
And the way that this square is defined is the width is 50 VW, and what VW stands for is
2:02
viewport width. So this is a percentage. We're saying 50% of our viewport width is going to be the width of our box
2:08
We have that same size on our height as well. So the height and width of our box are both equivalent to 50% of the size of our screen
2:15
That's what the viewport stands for. So our entire screen, 50% of the width of our screen is the width of our box
2:21
If we change our height here to VH instead of VW, we're just swapping our width for height
2:25
So now 50% of the height of our window over here on the right-hand side is going to be the height of our box
2:31
So these viewport units are just percentages of your screen size. So VW is specifically for dealing with percentages based on the width of your screen and VH is specifically for dealing with the height of your screen So if I were to increase or decrease the size of my screen these boxes are actually going to change with that increase
2:48
or decrease to the size of my screen. I can even actually turn my phone sideways
2:52
and if I just expand this out, you'll be able to see that this box now is much wider than it was before
2:57
and that's because 50% of the width of my screen is much more than it was before
3:02
Let me just bring this back to how it was before. Move that back over
3:07
There we go. So now we're back to where we were. So these viewport units for VW and VH are just
3:12
based on the width and height of your screen. Now there's another viewport unit that's very
3:16
similar to VW and VH and it's going to be called VMAX and Vmin. So let's set this to VMAX
3:21
we're going to set this to Vmin and we'll give it a save. What VMAX and Vmin do is they check to
3:26
see which is the larger of the two, your width or your height. So VMAX says whichever width or
3:32
height is larger, I'm going to use that. In our case, our height of our screen is much larger than the width
3:37
So we're currently setting vmax here to 50% of our height, which is the same as 50VH
3:42
Min is just the opposite, which of those two is the smallest? In our case, our width is smaller than our height, so the height of our actual box is being set to 50% of the width of our screen
3:53
If we swapped these to be max and min like this, we would now get the exact same thing we had before when this was set to 50VW and this was set to 50VH
4:03
And again, that's just because it's taking the minimum or the maximum of those two values
4:07
So this right there is four of the different CSS viewport units, and these are all the four
4:11
that we had before the recent 20 new additions were added to CSS
4:16
Two of those new additions are pretty straightforward to cover, so I'm going to be talking about those next, and they are the VI and the VB units, and this stands for the viewport inline and
4:25
the viewport block unit. So let me just change this to VI, I'm going to change this to VB, and we're going to save
4:31
And you're going to notice our size of our shape is exactly the same as it was before, and that's because
4:36
by default, if you change nothing with your site, V-I, this inline element, is going to stand
4:41
for the width of an element, and VB, that block level is going to be standing for the height
4:47
And the reason, though, that they added this VI and VB, when by default, they work the same
4:51
as VW and VH, is because if you change the writing mode of your document, for example
4:56
instead of writing left to right in a horizontal mode like you would do in English, you instead
5:01
change to writing in a vertical motion, so you write from top to bottom, and then move over
5:05
and then top to bottom. Now that is going to swap which one i and b stand for. So what I'm going to do is I'm
5:10
going to come in here and I'm going to change my writing mode and instead of being a horizontal, I'm going to change it to a vertical writing mode. And now when I save, you can see the size of my box has
5:18
changed and that because v i now represents the height of the box and vb is going to be representing width So this 50VI right here is essentially the equivalent of 50VH and 50VB is now the equivalent
5:31
of 50VW. Now, the reason they added these again is to deal with this writing mode, so if your website
5:36
needs to support multiple different writing modes, odds are that you also want to swap
5:40
which way your different directions are going to be when you change that writing mode
5:44
So having the ability to do that automatically to CSS is really nice, and why these CSS units
5:49
were added to the spec. Now, that covers the six main CSS viewport units you have
5:55
but as I said, there are 24 total units, but those other 18 units we haven't talked about yet
6:00
are just modifications of the six units that already exist. I'm going to swap this all back to VW and VH
6:06
because those are the easiest to understand, and we're going to be talking about how these different modifiers work
6:11
So these three different modifiers are called small, large, and dynamic, and all they do is represent what size of the viewport you want to use
6:19
As you can see on the right here, as I scroll my phone, you can see that this top bar collapses
6:23
and expands in size. As I scroll, it disappears. And when I scroll back down, you can see it appears
6:28
So the actual viewport, the size of my screen that I can actually see content on changes
6:33
Right here, it's fairly small. And when I scroll up and that URL bar goes away, it is now much larger
6:38
So that's where that small, dynamic, and large viewport modifier come in
6:42
This right here is considered a large viewport because there's nothing obscuring up
6:46
As I'm scrolling, we have a dynamic size between the two. and then when I'm here where the URL ball is fully exposed
6:52
this is now the small size of my viewport because the URL bar is taking up a lot of space
6:57
So let me show you what that would look like by creating multiple different boxes. On the width of these boxes, I'm just going to say
7:02
for example, 100%, actually, yeah, 100% and then for our boxes, I'm just gonna say flex grow 1
7:11
That should make it so that our boxes fill essentially the entire space, and we can actually just get rid of that width
7:15
So they should just fill the entire space. There we go. They are filling the entire space. space and what I want to do is I want to set a height on all of these but I want to use a
7:22
different height and I'm also going to say align items at the flex start there we go
7:27
so for our heights we're going to have s vh this stands for the small viewport height
7:32
we're going to have lvh which stands for the large viewport height and then finally we're
7:36
going to have dv which stands for the dynamic viewport height and when I say that you're
7:41
going to notice these bars are actually slightly different heights from one another If we look at 50 VH, that's the standard, you can see that that is the size that we're used to
7:49
If we look at Box 2, this blue one, it has SVH, so it's using the smallest of the viewport heights
7:54
So what this is essentially saying, when my URL bar is showing at the top like this, this bar right here is going to be 50% of the height between the bottom of that URL bar
8:01
and then the bottom of my phone The next bar this red bar we have here this is set to LVH so it is going to be the large version of our viewport So this is essentially 50 of the height as if this URL bar was not here
8:12
This is the largest version of our site. It's 50% of the height of that. And you'll notice this red bar and green bar are the same
8:18
and that's because depending on what browser you use, this VH value is going to be set to somewhere
8:23
either LVH, SVH, or somewhere in between. This value is determined by the browser
8:29
which means that in Firefox, which I'm using, this red bar and this green bar the same size, but in Chrome or another browser, they may actually
8:35
be different sizes and maybe the green and blue bar would be the same size. It really is up to the
8:40
browser which of these values they use for setting that VH value. Most likely they'll probably go
8:45
with this LVH value, but again, it's entirely up to the browser. Finally, we get to our gray bar
8:50
This is the one that's set up by dynamic viewport height, so DVH, and this one is going to scale
8:54
with the size of my viewport. So as I scroll down and that top URL bar goes away, you can see my
9:00
gray bar increases in size until it's the exact same size as my LVH bar. So DVH is essentially going to be
9:07
any value between SVH and LVH. It's always going to scale between those two values, and it's going to be
9:13
dependent on how much of the screen is covered by other elements. So as I start to scroll back up
9:17
and you can see my URL bar starts to appear, the gray bar grows or shrinks in size, depending on how
9:22
much of that URL bar is showing up on my screen. This is really important because if you want
9:26
your site to scale perfectly to the actual size of the screen, then using DV
9:30
VVH instead of these other units is probably the way you want to go because it's going
9:34
to scale again like I said with that URL bar being showing or hidden
9:37
And that right there actually covers all 24 of the different viewport units and that's
9:41
because the same thing I did with VH you can do with VW. I can change all of these to be VW and now they're going to scale off of the width of my
9:49
screen and you can see they're all the same size because no matter what I do with my mobile
9:53
browser the width is always the same. It never actually changes. I can do the same thing with Vmin instead of this
10:00
I could do V-Max, I could do V-I, and I could do VB
10:04
And that's how you get all the way up to 24 different viewport units. So really an important thing to remember are there are six main viewport units
10:11
You have VH and V-W for height and width. You have max and min for determining the max and min of those two
10:16
Then you have V-I and V-B, which are going to be perfect for when you have writing direction changes so you can change which way it's going to go waste on your writing direction
10:24
Then finally, you have S-V, L-V, and D-V, and these are going to be determining whether
10:29
use the dynamic version, this largest version, or the smallest version of your viewport
10:33
or you can just use the standard, you know, like VH and VW if you don't want those extra
10:37
prefixes. And that's all there is to the CSS viewport units. If you want to learn more cutting-edge
10:42
CSS, check out my video on CSSHoudini. It's going to be linked right over here. With that
10:47
said, thank you very much for watching and have a good day
#Computer Education
#Consumer Electronics
#Educational Software
#Skins
# Themes & Wallpapers
#Virtual Reality Devices