CSS3 단위 vw 및 vh의 사용에 대해-CSS 튜토리얼-php.cn

CSS3 단위 vw 및 vh의 사용에 대해

不言

풀어 주다： 2018-06-20 11:44:23

원래의

3147명이 탐색했습니다.

이 글에서는 주로 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中文网！