Units in css (em,rem,vh,vw):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css Unit </title>
</head>
<style>
html{
font-size: 20px;
}
.first_item{
background-color: aquamarine;
color: black;
border: 2px solid black ;
/* agar divce ke according agar apko wdth leni hai apke portal ki to aap vw ka use kar sakte hai usme w device ke accoding uski width ko change kar denga
*/
width: 80vw;
margin: 23px auto;
font-size: 17px;
}
.first_item p{
/* rem jo hai wo direct html ki unit wo multiple kar deta hai ... agar parents me bhi font sixzse hai to bhi wo html ka hi lenga .... 20 *2 */
font-size: 2rem;
}
.second_item{
background-color: rgb(163, 106, 234);
color: black;
border: 2px solid black ;
/* agar divce ke according agar apko wdth leni hai apke portal ki to aap vw ka use kar sakte hai usme w device ke accoding uski width ko change kar denga
*/
width: 80vw;
margin: 23px auto;
/* agar apko aise hi height me karna hai same width according to the browser so you can use the vh in css */
/* height: 100vh; */
max-height: 80vh;
/* font-size: 18px; */
}
.second_item p{
/* parents ke font size ke 2 guna 18 * 2 ... agr parent me koi font sizse nahi hai to wo html ki font size se le lenga .... */
font-size: 2em;
}
</style>
<body>
<!-- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units -->
<div class="container">
<div class="first_item">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quis corrupti temporibus.</p>
</div>
<div class="second_item">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe beatae voluptates obcaecati?</p>
</div>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.