CSS EM REM VW VH VMIN VMA
css에 em, rem, vw, vh, vmin, vma
em, rem, vw, vh, vmin, vmax
em : 부모 font-size를 상속받음
rem : 부모 font-size를 상속받지 않고 2em 으로 표시됨
vw : 브라우저너비의 해당 %
vh : 브라우저높이의 해당 %
vmin : 브라우저 너비와 높이중 짧은쪽의 해당 %
vmax : 브라우저 너비와 높이중 큰쪽의 해당 %
<style>
p {
margin: 0;
padding: 0;
font-size: 2em;
}
/* rem : 부모 font-size를 상속받지 않고 2em 으로 표시됨 */
p span:first-child {
font-size: 2rem;
}
/** em : 부모 font-size를 상속받음 */
p span:last-child {
font-size: 2em;
}
/** 브라우저 비율에 따라서 */
p.vw {
/* 5vw : 브라우저너비의 5% */
font-size: 5vw;
}
p.vh {
/* 5vh : 브라우저높이의 5% */
font-size: 5vh;
}
p.vmin {
/* 5vmin : 브라우저 너비와 높이중 짧은쪽의 5% */
font-size: 5vmin;
}
p.5vmax {
/* 5vmax : 브라우저 너비와 높이중 큰쪽의 5% */
font-size: 5vmax;
}
</style>