목차
CSS Relative Size
Root Relative Length
Viewport Relative Length
calc()
CSS Relative Size
em calculator
A List Apart: Articles: Learning to Love the Boring Bits of CSS
Root Relative Length
rem
으로 표기한다. ex)
1.2rem
항상 최상위 엘리먼트인
<html>
의 글꼴 크기를 기준으로 배율을 책정한다.
IE
9 이상과 최신 브라우저들이 지원한다.
Viewport Relative Length
vh
와
vw
는 뷰포트 높이와 너비를 기준으로 치수를 지정한다.
뷰포트 높이의 50%로 지정
div
{
height
:
50vh
;
}
1vh
는 뷰포트 높이의 1%를 뜻한다.
1vw
도 마찬가지.
IE
9+ 및 Chrome, Safari 지원.
calc()
서로 다른 단위간의 계산을 지원한다.
div
{
margin
:
0
20px
;
width
:
calc
(
33%
-
40px
)
;
}