[CSS] 길이 단위
4581 단어 CSS
CSS에 사용되는 길이 단위
유닛
설명
픽셀 환산기1
em
상대 단위.요소의 글꼴 크기
-
ex
상대 단위.표준은 원소x-height(소문자x의 높이)
-
in
절대 단위.인치2.54cm
96px
cm
절대 단위.센티미터.밀리미터
약 37.80px
mm
절대 단위.밀리미터
약 3.78px
pt
절대 단위.요점1/72인치
약1.33px
pc
절대 단위.오징어.12점 상당
16px
px
절대 단위.픽셀
1px
실제로 자주 사용하는 단위는 em,px 두 가지죠.
디자이너에 따라 PT로 지정할 때도 있지만 픽셀을 완전히 구분할 수 없기 때문에 px에 따라 엄격하게 지정할 수 없습니다.
또한 CSS 3에는 다음 단위가 추가됩니다.
그 중에서rem는 매우 사용하기 쉬운 단위이다.
유닛
설명
픽셀 환산기1
ch
상대 단위.데이텀은 요소 "0"의 너비입니다.
-
rem
상대 단위.기준은 루트 요소의 글꼴 크기입니다
-
vw
상대 단위.뷰 포트 너비의 1/100입니다.
-
vh
상대 단위.뷰 포트 높이의 1/100
-
vmin
상대 단위.짧은 보기 포트 1/100
-
vmax
상대 단위.긴 측면 뷰 포트 1/100
-
q
절대 단위.등급1/4mm
약 0.95px
새 단위
rem 은 CSS3에 추가된 새 단위입니다.
em와 유사하지만,rem는 부모 요소가 아니라 루트 요소의 글꼴 크기에 따라 계산됩니다.
rootem,rem입니다.
중첩된 글꼴 크기 지정이 쉬움
<ul>
<li>果物
<ul>
<li>りんご</li>
<li>みかん</li>
</ul>
</li>
<li>野菜</li>
</ul>
li{
font-size: 1.2rem;
}
!(1.2x1.2=1.44).rem라면 번거로운 계산이 필요 없어요. 뿌리의 글씨체 크기만 파악하면 돼요.
브라우저 지원
http://caniuse.com/#feat=rem
IE가 11개가 넘지만 기본 브라우저가 덮어쓰므로 문제가 없습니다.
IE9/10이라도 단축키 속성을 사용하지 않고
font-size: 1.2rem; 등으로 지정하면 된다.뷰 포트 단위 사용
지정된 응답 사이트의 높이에서 활약하다.
(자세한 내용은 사이트 축소판 그림
예) 첫눈에 많은 그림을 보여주고 싶어요!
<body>
<div class="eyecatch">
<img src="hoge.jpg" alt="hoge" />
</div>
<p>ほげほげほげほげ</p>
</body>
.eyecatch{
width: 100%;
overflow: hidden;
}
.eyecatch img{
height: 100vh;
}
브라우저 지원
http://caniuse.com/#feat=viewport-units
vh에 대해서는 IE 9 이상이 지원됩니다.
사이트 축소판 그림
Reference
이 문제에 관하여([CSS] 길이 단위), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/anchoor/items/f197296d6b4ae874e260텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
