집 > 기사 > 웹 프론트엔드 > CSS3 중형 유닛 사용의 차이점

CSS3 중형 유닛 사용의 차이점

php中世界最好的语言원래의: 2018-03-22 16:51:141912검색

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!