CSS3 중형 유닛 사용의 차이점

이번에는 CSS3 미들급 단위 사용 시 차이점을 알려드리겠습니다. CSS3 미들급 단위 사용 시 주의사항은 무엇인가요?

px: 절대 단위, 페이지가 정확한 픽셀로 표시됩니다.

em: 상대 단위, 참조 지점은 상위 노드의 글꼴 크기입니다. font-size를 정의하면 자체적으로 계산됩니다(브라우저 기본 글꼴은 16px), 1em은 전체 페이지 내에서 고정된 값이 아닙니다.

rem: "루트 em"으로 이해될 수 있는 상대 단위입니다. 루트 노드 HTML의 글꼴 크기를 기준으로 계산됩니다. CSS3에는 새로운 속성이 있으며 chrome/firefox/IE9+에서 지원됩니다.

(또한 Chrome에서는 최소 글꼴 크기를 12로 강제하고 있으니 주의하세요. 10px로 설정해도 결국 12px로 표시됩니다. HTML의 글꼴 크기를 10px로 설정하면, 하위 노드 rem의 계산은 여전히 ​​12px을 기반으로 하므로 온라인에 많은 것이 있습니다. 기사에서는 쉬운 계산을 위해 html의 글꼴 크기를 10으로 설정하는 것이 그다지 바람직하지 않다고 언급했습니다.

rem은 모바일 애플리케이션용 Taobao 페이지를 참조할 수 있습니다http://m.taobao.com (html의 글꼴 크기는 동적 계산을 통해 구함)

페이지 벤치마크 320px(20px), html 글꼴 - 크기 값 계산:

var ele=document.getElementsByTagName("html")[0],    
     size=document.body.clientWidth/320*20;    
ele.style.fontSize=size+"px"

참고: 메타 스케일링 비율은 1:1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

vw로 설정되어야 합니다. 시점 너비, 창 너비, 1vw는 창 너비의 1%와 같습니다.

vh: 시점 높이, 창 높이, 1vh는 창 높이의 1%와 같습니다.

vmin: vw와 vh 중 더 작은 것입니다.

vmax: vw와 vh 사이의 더 큰 것입니다.

vw, vh, vmin, vmax: IE9+ 부분 지원, chrome/firefox/safari/opera 지원, iOS safari 8+ 지원, Androidbrowser4.4+ 지원, android39용 Chrome 지원

기타 단위는 다음과 같습니다.

%: 백분율

in: 인치

cm: 센티미터

mm: 밀리미터

pt: 포인트, 약 1/72인치

pc: 파이카, 약 6pt, 1/6인치

ex: 전류를 취함 x 높이를 결정할 수 없는 경우 효과 글꼴의 x 높이는 0.5em으로 계산됩니다(IE11 이하에서는 지원되지 않음, firefox/chrome/safari/opera/ios safari/android browser4.4+ 등에서는 모두 지원해야 함). 속성 추가 접두사가 있나요)

ch: 노드에서 사용하는 글꼴의 "0" 문자를 기준으로 찾을 수 없으면 0.5em입니다(ie10+, chrome31+, safair7.1+, Opera26+, iOS safari 7.1+, Android browser4.4 +지원)

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

CSS3 섀도우 박스-섀도우 기능 사용에 대한 자세한 설명

3D 사진 앨범 효과 구현

CSS에서 Zoom 속성 또는 Overflow:auto를 사용하는 방법

2D 시뮬레이션 관람차 회전 애니메이션 특수 효과 실현

위 내용은 CSS3 중형 유닛 사용의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!