This article will be short one :)
Yesterday when I was fixing layout I asked what’s the difference between units vh/vw and % Let’s see an example
Looks like both is going to take 50 percent of width of the viewport. And that’s right. in this case it will give you exactly the same result.
Now let’s see slightly different case. We will put our divs into parent div which has width set to 50%:
In this case child div with width 50% will take 50% of parent’s width and child div with width 50vw will still keep 50% of viewport (the browser window size) and not parent div. Like this:
That’s all the difference. VW and VH - those are viewport-percentage units.
|vw||1/100th viewport width|
|vh||1/100th viewport height|
|vmin||1/100th of the smallest side|
|vmax||1/100th of the largest side|
Hopefully it will help!