CSS3에 어떤 새로운 단위가 추가되나요?-프런트엔드 Q&A-php.cn

CSS3에 어떤 새로운 단위가 추가되나요?

青灯夜游

풀어 주다： 2022-01-12 17:17:07

원래의

2140명이 탐색했습니다.

css3에 추가된 새로운 단위: 1. "ch", 문자 0의 너비; 2. "rem", 주로 루트 요소 글꼴의 크기에 상대적인 단위. 3. "vw", 문자의 너비 4. "vh", 창 높이 5. "vmin" 6. "vmax";

CSS3에 어떤 새로운 단위가 추가되나요?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3의 새로운 길이 단위

CSS3의 새로운 길이 단위는

ch, 문자 너비 0ch，字符0的宽度
rem，是一个相对单位，主要是相对于根元素字体的大小，使用rem,我们需要参考指定的根元素。
vw，viewpoint width，视窗宽度，1vw=视窗宽度的1%
vh，viewpoint height，视窗高度，1vh=视窗高度的1%
vmin，vmax等

新增的viewpoint相关的单位一般是针对移动设备的。

rem其实跟em是一回事，只不过rem多了一个限制条件，它表示根元素（html元素）的font-size。

rem和em的区别，我们可以通过下面这个例子来看一看，

<html style="font-size: 12px;">
<body>
    <div id="div1" style="font-size: 16px">
        <div id="div2" style="font-size: 1.2em"></div>
        <div id="div3" style="font-size: 1.2rem">
            <div id="div4" style="font-size: 1.2em"></div>
        </div>
    </div>
</body>
</html>

로그인 후 복사

此时，

div2的font-size: 16px*1.2em=19.2px
div3的font-size: 12px*1.2rem=14.4px
div4的font-size: 12px*1.2rem*1.2em=17.28px

可见，rem不存在级联关系，而em存在级联关系。

值得注意的是，IE8及以下、Safari 4、IOS 3.2等不支持rem

rem은 주로 루트 요소의 글꼴 크기에 상대적인 상대적 단위입니다. rem을 사용하려면 지정된 루트 요소를 참조해야 합니다.

vw, 시점 너비, 창 너비, 1vw=창 너비의 1%🎜🎜🎜vh, 시점 높이, 창 height , 1vh=창 높이의 1%🎜🎜🎜vmin, vmax 등🎜🎜새로운 관점- 관련 단위 일반적으로 모바일 장치를 대상으로 합니다. 🎜🎜rem은 실제로 em과 동일합니다. 단, rem에는 루트 요소(html 요소) 글꼴을 나타내는 추가 제한 사항이 있습니다. -크기. 다음 예시를 통해 🎜🎜rem과 em의 차이점을 확인할 수 있습니다. 🎜rrreee🎜 이때 글꼴 크기는 🎜🎜🎜🎜div2입니다. : 16px*1.2em=19.2px🎜🎜🎜div3 글꼴 크기: 12px*1.2rem=14.4px🎜🎜🎜div4 글꼴 -size -size: 12px*1.2rem*1.2em=17.28px🎜🎜 rem에는 계단식 배열이 없는 것을 볼 수 있습니다. em계단식 관계가 있습니다. 🎜🎜IE8 이하, Safari 4, IOS 3.2 등에서는 rem 단위를 지원하지 않는다는 점에 유의할 필요가 있습니다. 🎜🎜(학습 영상 공유: 🎜css 영상 튜토리얼🎜)🎜

위 내용은 CSS3에 어떤 새로운 단위가 추가되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!