em

• 타이포그래피에서 현재의 지정된 포인트 사이즈를 나타내는 단위 지금 폰트 사이즈를 나타내는 단위 부모의 font 사이즈를 곱ㄱ하는 값

• relative to parent element

fontsize : 16px
1em == 16px

<div class="parent">
    Parent
    <div class ="child">Child</div>
</div>

.parent {
    font-size:8em; // 16px*8 = 128px
}
.child {
    font-size:0.5em; // 128px*0.5 = 64px
}

ex

• em 과 다르게 지정된 폰트 패밀리에 따라서 높이가 변경될 수가 있음

cn

• 적용된 폰트 패밀리에서 0에 숫자 0의 너비를 나타내는 단위

rem

• root 에 지정된 포트 사이즈에 따라서 크기가 결정됨

• relative to root element””

fontsize : 16px
1em == 16px

<div class="parent">
    Parent
    <div class ="child">Child</div>
</div>

.parent {
    font-size:8em; // 16px*8 = 128px
}
.child {
    font-size:0.5em; // 16px*0.5 = 8px
}

lh

• 지원 안된

vw

• viewport width viewport 너비에 있는 퍼센트를 쓰겠다는 의미

vh

• viewport width viewport 높이에 있는 퍼센트를 쓰겠다는 의미

vmin

• 브라우저의 너비와 높이 중에 작은 값의 퍼센트

vmax

• 브라우저의 너비와 높이 중에 큰 값의 퍼센트

pc pt px

참조

• pixel To em [http://pxtoem.com] (http://pxtoem.com)