<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Size units in css em,rem,vw,vh</title>
</head>
<style>
body{
width: 100vw;
/* width is 100 % or set by your browser width */
height: 100vh;
/* height is 100 % or set by your browser width */
}
html{
font-size: 10px;
}
.conatiner{
font-size: 10px;
}
h1{
text-align:center;
}
#first{
/* its behaviour accordin to the parents size * em .... in this case cotainer * em ..... 10 * 5 = 50px */
font-size: 5em;
}
#third{
/* its behaviour accordin to the html default size * em .... in this case cotainer * em ..... 10 * 5 = 50px */
font-size: 5rem;
}
</style>
<body>
<div class="container">
<h1 id="first">vishal</h1>
<h1>vh</h1>
<h1 id="third">rem</h1>
<h1>em</h1>
<h1>vw</h1>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.