<divclass="box"></div>

body{width:300px;}.box{/* ⚜️ 50% of the width of body (300px) */width:50%;height:100px;background-color:gold;border-top:3pxsolidorange;}

body{margin:0px;}.box{/* ⚜️ 50% of the viewport */width:50vw;/* ⚜️ 100% of the viewport */height:100vh;background-color:gold;border-top:3pxsolidorange;}

body{margin:0px;}.box{/* ⚜️ because the font size defaults is 16 px    so width will be 10 * 16 = 160 px */width:10em;height:100vh;background-color:gold;border-top:3pxsolidorange;}

body{margin:0px;}.box{/* ⚜️ change font size */font-size:20px;/* ⚜️ because the font size defaults is 16 px    so width will be 10 * 20 = 200 px */width:10em;height:100vh;background-color:gold;border-top:3pxsolidorange;}

html{/* 1️⃣ it means 62.5% of 16px = 10px     so 10px will be root font size!*/font-size:62.5%;}body{margin:0px;}.box{/* 2️⃣ rem x root font size     the result will be 150 px*/width:15rem;height:100vh;background-color:gold;border-top:3pxsolidorange;}