Live
x
<h1>body, html의 font-size: 10px일 경우</h1><h2>1. px</h2><div class="px">font-size: 20px</div><h2>2. em</h2><div class="em"> font-size: 2em <div class="em"> font-size: 2em <div class="em">font-size: 2em</div> </div></div><h2>3. rem</h2><div class="rem"> font-size: 2rem <div class="rem"> font-size: 2rem <div class="rem">font-size: 2rem</div> </div></div><h2>4. %</h2><div class="persent-wrap"> <div class="persent"> <div class="persent"></div> </div></div><h2>5. vmin & vmax</h2><div class="viewport-wrap"> <div class="vmin">50vmin * 50vmin</div> <div class="vmax">50vmax * 50vmax</div></div>
Live
xxxxxxxxxx48
/* 기본셋팅 */body,html{ font-size: 10px;}h2,h1{ font-size: 30px;}div{ border: 1px solid #aaa;}/* px */.px{ font-size: 20px;}/* em */.em{ font-size: 2em;}/* rem */.rem{ font-size: 2rem;}/* persent */.persent-wrap{ width: 300px; height: 300px;}.persent{ width: 50%; height: 50%;}/* vmin & vmax */.viewport-wrap{ font-size: 20px;}.vmin{ width: 50vmin; height: 50vmin;}.vmax{ width: 50vmax; height: 50vmax;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.