Here I just share new and uncommon CSS unit to web application. CSS3 introduce new CSS units. We are familure with px,%,rem and em. But we discuss new units like vh and vh.
To fit the design in view port developed by javascript. But solving this problem, in css we simply add width and height with vw and vh respectively.
Units and Description
| Units | Description |
|---|---|
| vw | Relative to 1% of the width of the browser window size. It is relative to viewport width. |
| vh | Relative to 1% of the height of the browser window size. It is relative to viewport height. |
In vh and vw first check the size of the viewport, then resize any elements on the page accordingly. If the user resizes the browser then the script runs again to resize the elements on the page.
100% can be 100% of the height of anything. For example, if I have a parent div that’s 1000px tall, and a child div that is at 100% height, then that child div could theoretically be much taller than the height of the viewport, or much smaller than the height of the viewport, even though that div is set at 100% height.
If I instead make that child div set at 100vh, then it’ll only fill up 100% of the height of the viewport, and not necessarily the parent div
Simple Example
100% height (parent is 280px)
SUMMARY: The vw/vh, we can size elements to be relative to the size of the viewport.
Happy Coding
If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.