CSS3에서 새로운 길이 단위를 사용하는 방법

사용법: 1. em은 현재 개체의 텍스트를 기준으로 한 글꼴 크기를 나타냅니다. 2. rem은 루트 요소를 기준으로 한 글꼴 크기를 나타냅니다. 3. ch는 숫자 0의 크기를 나타냅니다. 5. vw는 뷰포트의 너비를 백분율로 나타냅니다. 6. ex는 현재 글꼴의 소문자 x 문자 높이 또는 1em의 1/2을 나타냅니다.

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

css3에서 새로운 길이 단위를 사용하는 방법

css3의 새로운 길이 단위는 다음과 같습니다.

• em: 현재 개체의 텍스트를 기준으로 한 글꼴 크기입니다. 상위 노드에 상대적인 글꼴 크기

• rem: 루트 요소 100db36a723c770d327fc0aef2ce13b1에 상대적인 글꼴 크기입니다. 적용 시나리오: 레이아웃은 텍스트 콘텐츠에 따라 결정됩니다.

• vh 및 vv: 1vh는 뷰포트 높이의 1/100과 같고 ①, 1vw는 뷰포트 너비의 1/100과 같습니다.

• vmin 및 vmax: 뷰포트 높이 및 너비의 최소 또는 최대값과 관련하여 vmin은 뷰포트 너비 및 높이의 1/100의 최소값과 같습니다. 애플리케이션 시나리오: 요소가 화면에 항상 표시되도록 만듭니다.

• ch: 숫자 0의 너비

• ex: 현재 글꼴의 소문자 x 문자 높이 또는 1em의 1/2②. 적용 시나리오: 위 첨자 및 아래 첨자

ch -- 문자 0의 너비

rem -- 루트 요소(html 요소)의 글꼴 크기

무슨 뜻인가요?

예를 들어 루트 요소인 html의 글꼴 크기가 100px인 경우 루트 요소 아래 요소의 rem 설정은 모두 1rem = 100px입니다.

rem의 초기 값은 16px입니다. 이는 루트 노드의 글꼴 크기가 설정되지 않은 경우 1rem = 16px임을 의미합니다.

기억하세요. 본문을 설정하면 루트 요소 html에 상대적입니다. 작동하지 않음

기억하세요: vw와 vh는 브라우저의 가시 영역, 즉 window.innerHeight, window.innerWidth

vw에만 관련됩니다. -- 브라우저의 가시 영역, 1vw는 브라우저 너비의 1%와 같습니다. 가시 영역

vh - 브라우저 시각적 영역, 1vh는 브라우저 가시 영역 높이의 1%와 같습니다.

vmin - vw와 vh 중 작은 값

vmax - vw와 vh 중 큰 값

브라우저 너비/높이 설정 1000px/600px

그런 다음

2vmin = 600*2/100 = 12px
2vmax = 1000*2/100 = 20px

(영상 공유 학습: css 영상 튜토리얼)

위 내용은 CSS3에서 새로운 길이 단위를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!