CSS3에서 vh는 창 단위인 "창 높이의 백분율"을 의미하며 vh는 창 높이에 상대적입니다. 는 100개의 단위로 나누어지며, 1vh의 크기는 창 높이의 100분의 1입니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!