<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<style>
/* rem (root em - best for font - relative to the font size of the root element ex:html) */
div{
width:15vw; /* (vw - viewport width unit) resize with viewport 15% of view port*/
margin:2vh; /* (vh - viewport height unit) 2%*resize with resizing the height not the width*/
min-width: 80vmin; /* (vmin - viewport minimum value unit)*/
}
div{
width:15vh; /* (viewport height unit) resize with viewport 15% viewport*/
}
div{
width:15vh; /* (viewport height unit) resize with viewport 15% viewport*/
}
</style>
<body>
<h1>hello</h1>
<div class="box">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</body>
<style>
/*ex (font-size height of x letter)
em (1em is equal 16px - divided 12/16 = .75) */
html{
font-size:1em;
}
.box{
width:30em;
font-size:2em;/*em The font size will be 2em (32px) + 1.2 em from the p = (38px) */
}
p{
font-size:1.2em;
}
</style>