CSS 유닛 - vh/vw와 %의 차이점은 무엇입니까?
저는 방금 새롭고 흔하지 않은 CSS 유닛에 대해 알게 되었습니다.vh그리고.vw뷰포트의 높이와 너비를 각각 측정합니다.
Stack Overflow에서 이 질문을 보았지만, 유닛들이 더 비슷하게 보입니다.
답은 구체적으로 다음과 같이 말합니다.
vw와 vh는 각각 윈도우 너비와 높이의 백분율입니다. 100vw는 너비의 100%, 80vw는 80% 등입니다.
은 것 .%더 일반적인 단위입니다.
Developer Tools에서 vw/vh에서 %, 그 반대로 값을 변경해보았는데 같은 결과가 나왔습니다.
그 둘 사이에 차이가 있습니까?, 왜 이 면,면에 요?CSS3?
100%수 있습니다.100%무엇보다도 높은 곳에 있는예를 들면 부모님이 계시다면div건입니다.1000px가 크고,가 있습니다.div 있습니다.100% 그 키,div는 이론적으로 뷰포트의 높이보다 훨씬 높거나 뷰포트의 높이보다 훨씬 작을 수 있습니다.
그 를 으로 ,div에 맞추다100vh, 그러면 뷰포트의 높이만 채워질 뿐이지 반드시 부모가 될 필요는div.
body,
html {
height: 100%;
}
.parent {
background: lightblue;
float: left;
height: 200px;
padding: 10px;
width: 50px;
}
.child {
background: pink;
height: 100%;
width: 100%;
}
.viewport-height {
background: gray;
float: right;
height: 100vh;
width: 50px;
}<div class="parent">
<div class="child">
100% height
(parent is 200px)
</div>
</div>
<div class="viewport-height">
100vh height
</div>이 질문이 매우 오래된 것으로 알고 있으며 @Josh Beam이 가장 큰 차이점을 언급했지만, 여전히 또 다른 문제가 있습니다.
가 해 봅시다.<div>, 의 자식<body>width: 100vw; height: 100vh; 합니다와 합니다.width: 100%; height: 100vh;컨텐츠를 추가하면 세로 스크롤 막대가 나타납니다.부터.vw합니다의 합니다.width: 100vw;입니다보다 클 width: 100%;의 차이는 바 폭을 하는 데 를 추가하게 , 높이 또한 두 수 이 약간의 차이는 수평 스크롤 바(사용자가 약간의 추가 폭을 확인하는 데 필요함)를 추가하게 되고, 결과적으로 두 경우 모두 높이도 약간 다를 수 있습니다.
상위 요소 크기가 문서 보기 포트 크기와 동일한 경우에도 사용할 항목을 결정할 때 이를 고려해야 합니다.
예:
으로.width:100vw;:
.fullviewport {
width: 100vw;
height: 100vh;
background-color: red;
}
.extracontent {
width: 100vw;
height: 20vh;
background-color: blue;
}<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>으로.width:100%;:
.fullviewport {
width: 100%;
height: 100vh;
background-color: red;
}
.extracontent {
width: 100%;
height: 20vh;
background-color: blue;
}<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>전체 뷰포트 너비의 백분율. 10vw는 현재 뷰포트 너비의 10% 또는 480px 너비의 전화기에서 48px로 분해됩니다.%와 vw의 차이는 em과 rem의 차이와 가장 유사합니다.
% 길이는 로컬 컨텍스트(포함 요소) 너비에 상대적인 반면 vw 길이는 브라우저 창의 전체 너비에 상대적인 값입니다.
@IanC 답변과 코드 예시 감사합니다.도움이 많이 됐습니다.해명:'사이드바'를 쓸 때 '스크롤바'를 의미했던 것 같은데요
다음은 스크롤 바를 계산하는 뷰포트 장치에 대한 몇 가지 관련 논의이며, 이는 또한 유용하다고 생각됩니다.
vw, vh, vmin, vmax 단위("viewport percentage length")에 대한 W3C 규격에는 "스크롤바가 존재하지 않는 것으로 가정됩니다.
파이어폭스는 너비:100%와 너비:100vw의 차이에서 @Nolonar의 코멘트처럼 스크롤바 너비를 100vw에서 뺀 것으로 보입니다.는 "사용할 수 있나요"를 인용하며 관찰합니다.
사양(?)과의 긴장 관계에서 Firefox를 제외한 모든 브라우저는 현재 "잘못" 100vw를 세로 스크롤 막대를 포함한 전체 페이지 너비로 간주한다고 말합니다.
vw(view-width) 및 vh(view-height) 단위는 뷰 포트 크기와 관계가 있으며, 여기서 100vw 또는 vh는 뷰 포트 너비/높이의 100%입니다.
예를 들어 뷰 포트의 너비가 1600px인데 2vw로 지정하면 뷰 포트 너비의 2%인 32px에 해당합니다.
% 단위는 항상 현재 요소의 상위 요소 폭을 기반으로 합니다.
반드시 제기되지 않은 차이가 있습니다.100vw는 스크롤 바의 폭을 포함하고 100%는 포함하지 않습니다.작은 차이지만 디자인을 할 때 중요합니다.
%와 vw의 차이는 em과 rem의 차이와 가장 유사합니다.% 길이는 로컬 컨텍스트(포함 요소) 너비에 상대적인 반면 vw 길이는 브라우저 창의 전체 너비에 상대적인 값입니다.
언급URL : https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and
'programing' 카테고리의 다른 글
| 고정된 너비와 높이 내에 타원이 있는 크로스 브라우저 멀티 라인 텍스트 오버플로가 추가됩니다. (0) | 2023.10.01 |
|---|---|
| 자바스크립트 / jQuery에서 $.param( ) 역함수 (0) | 2023.10.01 |
| 전처리기를 이용한 문자열 연결 (0) | 2023.10.01 |
| 호스트 시스템에서 도커 이미지는 어디에 저장됩니까? (0) | 2023.10.01 |
| ES6 Itable을 배열로 변환 (0) | 2023.10.01 |