What's the difference between VW and VH units in CSS?
VW and VH Explained in detail for beginners.
Thread 🧵
#CSS #100DaysOfCode
VW and VH Explained in detail for beginners.
Thread 🧵
#CSS #100DaysOfCode
1- First of all, You have to know that the term Viewport means the browser's entire view.
For example.
For example.
2- Now let's do the real business. When we say for example 50 VH, then it's going to take Up 50 of 100 viewport height. what does that even mean?
⬇️
⬇️
The way I want you to think of this viewport is SLICES. So each Viewport height(VH) is a slice across, it goes up and Down.
it is always going to be 100 of them no matter How big or small the browser is.
⬇️
it is always going to be 100 of them no matter How big or small the browser is.
⬇️
You can make it tiny you Could stretch it across your whole screen, there are always 100 viewport heights And each one is a slice.
This image shows each slice of the viewport.
This image shows each slice of the viewport.
3- For viewport widths, it's the same thing only it goes across And the slices go down.
Viewport heights are used much more than VW Because, for The most part, things go all the way across anyway for both units.
Viewport heights are used much more than VW Because, for The most part, things go all the way across anyway for both units.
4- Let's get to the real business and dive into more practical examples.
create this header in your HTML5.
create this header in your HTML5.
5- By default the background color is going to Wrap the content.
If we add more paragraphs it's Going down along with the content, what I want Is the header background to take up the entire thing, the entire screen.
If we add more paragraphs it's Going down along with the content, what I want Is the header background to take up the entire thing, the entire screen.
6- What if I try to use 100% for the height.
what's gonna happen?
After doing this you'll notice that there is no difference.
Why?
what's gonna happen?
After doing this you'll notice that there is no difference.
Why?
6- If we inspect the body and highlight it you may think that The body takes up the browser body but it's not.
it's just wrapping Whatever is in the content, so setting into 100% of the body is just Literally doing what's already doing.
it's just wrapping Whatever is in the content, so setting into 100% of the body is just Literally doing what's already doing.
7- So what Can I do if I want the background to take up the entire viewport?
we want to cover everything with the background and this is where viewport Heights come in.
So we'll change this to 100vh instead of 100%.
we want to cover everything with the background and this is where viewport Heights come in.
So we'll change this to 100vh instead of 100%.
8- Now after applying the 100vh you see that the background covers the entire viewport just like we want.
9- If I change it to 50vh it's gonna take up half the browser body.
for example :
for example :
10- What about VW? If I use 50vw How is it gonna look like?
11- It's gonna look like this If I use 50vw.
12- We don't use VW that much because VH goes all the way across Anyway so you're not gonna use it often unless you want to shrink something's width like we just saw in the previous example.
13- VH makes Creating landing pages very easy, it's popular now to have a whole Big image with some text and VH allows us to do this very easily.
What do you think?
If you have any additional information please make sure to share it with us so everyone can learn.
Make sure to follow me for more content like this.
@devatTheCave
Thank you for reading.
If you have any additional information please make sure to share it with us so everyone can learn.
Make sure to follow me for more content like this.
@devatTheCave
Thank you for reading.
جاري تحميل الاقتراحات...