이 글에서는 주로 css3 새 단위 vw 및 vh의 사용 튜토리얼을 소개합니다. 이 글에서는 예제 코드를 사용하여 vw, vh, vmin, vmax의 의미와 vw, vh 및 % 백분율의 차이점을 소개합니다. 살펴보기
반응형 레이아웃 단위의 경우 먼저 rem 단위를 사용하여 적응을 구현하는 것을 생각할 것이지만, 요소 크기와 동적으로 계산하려면 스크립트를 내장해야 합니다.
예:
(function (doc, win) {
let docEl = doc.documentElement
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
let recalc = function () {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 14 * (clientWidth / 320) + 'px'
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)JS와 CSS를 함께 결합할 필요가 없는 단원이 있나요? 대답은 '예'입니다. vw/vh입니다.
vw = view width vh = view height
이 두 단위는 CSS3에 도입되었으며 위에서 뷰포트 단위라고 불리며 브라우저 창에 더 가까운 크기를 정의할 수 있습니다.
vw, vh, vmin, vmax의 의미
(1) vw, vh, vmin, vmax는 창 단위이자 상대 단위입니다. 이는 페이지의 상위 노드나 루트 노드와 관련이 없습니다. 뷰포트의 크기에 따라 결정됩니다. 단위는 1이며 이는 1%와 같습니다.
뷰포트는 브라우저가 실제로 콘텐츠를 표시하는 영역입니다. 즉, 도구 모음과 버튼이 없는 웹 브라우저입니다.
(2) 구체적인 설명은 다음과 같습니다.
vw: 창 너비의 백분율(1vw는 창 너비의 1%를 나타냄)
vh: 창 높이의 백분율
vmin: 현재 vw와 vh 사이의 작은 값
vmax: 현재 vw와 vh의 큰 값
vw, vh와 % 백분율의 차이
(1) %는 상위 요소에 대한 크기 설정 vw와 vh의 비율은 창 크기에 따라 결정됩니다.
(2) vw와 vh의 장점은 높이를 직접 얻을 수 있다는 것입니다. 그러나 %를 사용하면 신체 높이를 설정하지 않으면 가시 영역의 높이를 정확하게 얻을 수 없으므로 이것이 좋은 장점입니다.
vmin 및 vmax 사용
모바일 페이지 개발 시 vw 및 wh를 사용하여 글꼴 크기(예: 5vw)를 설정하면 세로 모드와 가로 모드에서 표시되는 글꼴 크기가 달라집니다.
vmin과 vmax는 현재 더 작은 vw와 vh이고 현재 더 큰 vw와 vh이기 때문입니다. 여기서는 vmin과 vmax를 사용할 수 있습니다. 가로 및 세로 화면 모두에서 텍스트 크기를 일관되게 만듭니다.
브라우저 호환성
(1) 데스크톱 PC
Chrome: 버전 26(2013년 2월)부터 완벽 지원
Firefox: 버전 19(2013년 1월)부터 완벽 지원
사파리 : 버전 6.1(2013년 10월)부터 완벽 지원
Opera: 버전 15(2013년 7월)부터 완벽 지원
IE: IE10(Edge 포함)부터 부분적으로만 지원(vmax는 지원하지 않음) , vm은 vmin을 대체함)
(2) 모바일 장치
Android: 버전 4.4(2013년 12월)부터 완벽 지원
iOS: iOS8 버전(2014년 9월)부터 완벽 지원
뷰포트를 사용하여 페이지를 조정하는 방법 units
CSS 단위로 vw만 사용하세요
1. 디자인 초안의 크기에 따라 vw 단위로 변환합니다(SASS 함수 컴파일)
//iPhone 6尺寸作为设计稿基准
$vm_base: 375;
@function vm($px) {
@return ($px / 375) * 100vw;
}2. 텍스트나 레이아웃의 높이, 너비, 너비는 vw를 사용하세요.
< p class="mod_nav">
< nav class="mod_nav_list" v-for="n in 5">
< a href="#" class="mod_nav_list_item">
< span class="mod_nav_list_item_logo">
< img src="http://jdc.jd.com/img/80">
< /span>
< p class="mod_nav_list_item_name">导航入口< /p>
< /a>
< /nav>
< /p>
.mod_nav {
background: #fff;
&_list {
display: flex;
padding: vm(15) vm(10) vm(10);
&_item {
flex: 1;
text-align: center;
font-size: vm(10);
&_logo {
display: block;
margin: 0 auto;
width: vm(40);
height: vm(40);
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
}
&_name {
margin-top: vm(2);
}
}
}
}이를 수행하는 가장 좋은 방법은 vw와 rem을 결합하는 것입니다
vm을 CSS 단위 코드로 사용하면 코드 양이 많이 줄어들지만 다음을 사용하여 구현된다는 것을 알 수 있습니다. 뷰포트 단위, 뷰포트 크기에 따라 자동으로 크기가 조정되고 최대 및 최소 너비 제한이 사라집니다.
그럼 레이아웃을 구현하려면 렘 단위를 결합하는 것이 더 낫다고 생각한 걸까요? rem 유연한 레이아웃의 핵심은 루트 요소의 크기를 동적으로 변경하는 것입니다. ·
뷰포트가 변경됨에 따라 변경되는 루트 요소의 크기에 대해 vw 단위를 설정하여 해당 크기를 동적으로 변경할 수 있습니다. 변경되었습니다.
루트 요소의 글꼴 크기의 최대값과 최소값을 제한하고 본문과 최대 너비 및 최소 너비를 협력하세요
이러한 방식으로 레이아웃 너비의 최대 및 최소 제한을 달성할 수 있습니다. 따라서 위의 조건을 바탕으로 코드 구현은 다음과 같다는 결론을 내릴 수 있습니다.
// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
@return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
// 同时，通过Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
max-width: 540px;
min-width: 320px;
}以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
위 내용은 CSS3 단위 vw 및 vh의 사용에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
