>  기사  >  웹 프론트엔드  >  CSS3에서 vh는 무엇을 의미합니까?

CSS3에서 vh는 무엇을 의미합니까?

WBOY
WBOY원래의
2022-04-15 16:08:5511422검색

CSS3에서 vh는 창 단위인 "창 높이의 백분율"을 의미하며 vh는 창 높이에 상대적입니다. 는 100개의 단위로 나누어지며, 1vh의 크기는 창 높이의 100분의 1입니다.

CSS3에서 vh는 무엇을 의미합니까?

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

css3에서 vh는 무엇을 의미하나요?

vh는 뷰포트(viewport) 높이에 상대적입니다. 1vw는 뷰포트 너비의 1/100과 같습니다.

클라이언트 측에서 뷰포트는 브라우저의 표시 영역을 나타냅니다.

모바일 측에는 3개의 뷰포트가 포함됩니다: Layout Viewport(레이아웃 뷰포트), Visual Viewport(시각적 뷰포트), Ideal Viewport(이상적) 뷰포트). Layout Viewport를 말합니다. "Viewport"는 브라우저 내부에 보이는 영역의 크기, 즉 작업 표시줄 제목 표시줄의 브라우저 영역 크기를 제외한 window.innerWidth/window.innerHeight의 크기를 말합니다. 하단 툴바.

vh 단위는 창 높이에 따라 자동으로 크기를 변경할 수 있습니다. 1vh는 창 높이의 1%입니다.

vw 및 vh는 뷰포트(뷰포트라고도 함, 수평선 또는 가시 범위) .

확장 지식:

vw: 뷰포트 너비의 백분율(1vw는 뷰포트 너비의 1%와 같습니다)

vh: 뷰포트 높이의 백분율(1vh는 뷰포트 높이의 1%와 같습니다)

vmin: vw와 vh 사이에서 가장 작은 것을 선택하세요.

vmax: vw와 vh 사이에서 가장 큰 것을 선택하세요.

vw와 vh는 상위 요소가 아닌 뷰포트를 기반으로 합니다. 1vw는 뷰포트 너비의 1/100과 같고, 1vh는 뷰포트 높이의 1/100과 같습니다. 예:

브라우저 높이는 950px, 너비는 1920px, 1vh = 950px/100 = 9.5px, 1vw = 1920px/100 =19.2px

vw, vh 및 %

%의 차이는 상위 요소의 크기를 기준으로 설정된 비율이고, vw vh는 뷰포트 크기에 따라 결정됩니다.

vw, vh can 높이를 직접 구하고, 몸체가 설정되지 않은 경우 % 높이의 경우 보이는 영역의 높이를 구할 수 없습니다.

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

위 내용은 CSS3에서 vh는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.