css vh and vw code example

Example 1: vh vs vw css

vh and vw measure the percentage of height and width of the viewport respectively.
 vw and vh are a percentage of the window width and height, 
respectively: 100vw is 100% of the width, 80vw is 80%, etc. 
This seems like the exact same as the % unit, which is more common

Example 2: what is css vh

CSS VH unit Property
Viewport Height ( vh ) 
– A percentage of the full viewport height. 10vh will resolve to 10% of the current viewport height. Viewport Minimum ( vmin ) 
– A percentage of the viewport width or height, whichever is smaller.

Example 3: vh in css

/*
vh	Relative to 1% of the height of the viewport*
*/
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 20vh;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the height of the browser window to see how the font-size of h1 changes.</p>
<p>1vh = 1% of viewport height.</p>
<p>The vh unit is not supported in IE8 and earlier.</p>

</body>
</html>

/*
I hope it will help you.
Namaste
Stay Home Stay Safe
*/

Tags:

Javascript Example

Recent Posts