html:css:relativesize

목차

CSS Relative Size

CSS Relative Size

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);
}

html/css/relativesize.txt · 마지막으로 수정됨: 2012/08/19 21:45 저자 kwon37xi