小編給大家分享一下純css3使用vw和vh實(shí)現(xiàn)自適應(yīng)的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

孝義ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

響應(yīng)式布局的實(shí)現(xiàn)依靠媒體查詢（ Media Queries ）來(lái)實(shí)現(xiàn)，選取主流設(shè)備寬度尺寸作為斷點(diǎn)針對(duì)性寫額外的樣式進(jìn)行適配，但這樣做會(huì)比較麻煩，只能在選取的幾個(gè)主流設(shè)備尺寸下呈現(xiàn)完美適配。

即使是通過 rem 單位來(lái)實(shí)現(xiàn)適配，也是需要內(nèi)嵌一段腳本去動(dòng)態(tài)計(jì)算根元素大小。

近年來(lái)，隨著移動(dòng)端對(duì)視口單位的支持越來(lái)越成熟、廣泛，使得我們可以嘗試一種新的辦法去真正地適配所有設(shè)備尺寸。

認(rèn)識(shí)視口單位（ Viewport units )

首先，我們要了解什么是視口。

在業(yè)界，極為推崇的一種理論是 Peter-Paul Koch (江湖人稱“PPK大神”)提出的關(guān)于視口的解釋——在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區(qū)域；而在移動(dòng)端較為復(fù)雜，它涉及到三個(gè)視口：分別是 Layout Viewport（布局視口）、 Visual Viewport（視覺視口）、Ideal Viewport。

而視口單位中的“視口”，在桌面端，毫無(wú)疑問指的就是瀏覽器的可視區(qū)域；但是在移動(dòng)端，它指的則是三個(gè) Viewport 中的 Layout Viewport 。

視口單位中的“視口”

根據(jù)CSS3規(guī)范，視口單位主要包括以下4個(gè)：

1. vw : 1vw 等于視口寬度的1%

2. vh : 1vh 等于視口高度的1%

3. vmin : 選取 vw 和 vh 中最小的那個(gè)

4. vmax : 選取 vw 和 vh 中較大的那個(gè)

視口單位區(qū)別于%單位，視口單位是依賴于視口的尺寸，根據(jù)視口尺寸的百分比來(lái)定義的；而%單位則是依賴于元素的祖先元素。

用視口單位度量，視口寬度為100vw，高度為100vh（左側(cè)為豎屏情況，右側(cè)為橫屏情況）

例如，在桌面端瀏覽器視口尺寸為650px，那么 1vw = 650 * 1% = 6.5px（這是理論推算的出，如果瀏覽器不支持0.5px，那么實(shí)際渲染結(jié)果可能是7px）。

兼容性

其兼容性如下圖所示，可以知道：在移動(dòng)端 ios 8 以上以及 Android 4.4 以上獲得支持，并且在微信 x5 內(nèi)核中也得到完美的全面支持。

利用視口單位適配頁(yè)面

對(duì)于移動(dòng)端開發(fā)來(lái)說(shuō)，最為重要的一點(diǎn)是如何適配頁(yè)面，實(shí)現(xiàn)多終端的兼容，不同的適配方式各有千秋，也各有缺點(diǎn)。

就主流的響應(yīng)式布局、彈性布局來(lái)說(shuō)，通過 Media Queries 實(shí)現(xiàn)的布局需要配置多個(gè)響應(yīng)斷點(diǎn)，而且?guī)?lái)的體驗(yàn)也對(duì)用戶十分的不友好：布局在響應(yīng)斷點(diǎn)范圍內(nèi)的分辨率下維持不變，而在響應(yīng)斷點(diǎn)切換的瞬間，布局帶來(lái)斷層式的切換變化，如同卡帶的唱機(jī)般“咔咔咔”地一下又一下。

而通過采用rem單位的動(dòng)態(tài)計(jì)算的彈性布局，則是需要在頭部?jī)?nèi)嵌一段腳本來(lái)進(jìn)行監(jiān)聽分辨率的變化來(lái)動(dòng)態(tài)改變根元素字體大小，使得 CSS 與 JS 耦合了在一起。

有沒有辦法能夠解決這樣的問題呢？

答案是肯定的，通過利用視口單位實(shí)現(xiàn)適配的頁(yè)面，是既能解決響應(yīng)式斷層問題，又能解決腳本依賴的問題的。

做法一：僅使用vw作為CSS單位

在僅使用 vw 單位作為應(yīng)用的一種 CSS 單位的這種做法下，我們遵守：

1.對(duì)于設(shè)計(jì)稿的尺寸轉(zhuǎn)換為vw單位，我們使用Sass函數(shù)編譯

//iPhone 6尺寸作為設(shè)計(jì)稿基準(zhǔn)
$vm_base: 375; 
@function vw($px) {
    @return ($px / 375) * 100vw;
}

2.無(wú)論是文本還是布局高寬、間距等都使用 vw 作為 CSS 單位

.mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vm(15) vm(10) vm(10); // 內(nèi)間距
        &_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);
            }
        }
    }
}

3.1物理像素線（也就是普通屏幕下 1px ，高清屏幕下 0.5px 的情況）采用 transform 屬性 scale 實(shí)現(xiàn)。

//code from http://caibaojian.com/vw-vh.html
.mod_grid {
    position: relative;
    &::after {
        // 實(shí)現(xiàn)1物理像素的下邊框線
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }
    }
    ...
}

4.對(duì)于需要保持高寬比的圖，應(yīng)改用 padding-top 實(shí)現(xiàn)

.mod_banner {
    position: relative;
    padding-top: percentage(100/700); // 使用padding-top
    height: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0; 
    }
}

由此，我們能夠?qū)崿F(xiàn)一個(gè)常見布局的頁(yè)面效果如下：

做法二：搭配vw和rem，布局更優(yōu)化

這樣的頁(yè)面雖然看起來(lái)適配得很好，但是你會(huì)發(fā)現(xiàn)由于它是利用視口單位實(shí)現(xiàn)的布局，依賴于視口大小而自動(dòng)縮放，無(wú)論視口過大還是過小，它也隨著視口過大或者過小，失去了較大最小寬度的限制。

當(dāng)然，你可以不在乎這樣微小的不友好用戶體驗(yàn)，但我們還是嘗試下追求修復(fù)這樣的小瑕疵吧。

于是，聯(lián)想到不如結(jié)合rem單位來(lái)實(shí)現(xiàn)布局？rem 彈性布局的核心在于動(dòng)態(tài)改變根元素大小，那么我們可以通過：

1. 給根元素大小設(shè)置隨著視口變化而變化的 vw 單位，這樣就可以實(shí)現(xiàn)動(dòng)態(tài)改變其大小。

2. 限制根元素字體大小的較大最小值，配合 body 加上較大寬度和最小寬度

這樣我們就能夠?qū)崿F(xiàn)對(duì)布局寬度的較大最小限制。因此，根據(jù)以上條件，我們可以得出代碼實(shí)現(xiàn)如下：

// rem 單位換算：定為 75px 只是方便運(yùn)算，750px-75px、640-64px、1080px-108px，如此類推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基準(zhǔn)值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 單位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    // 同時(shí)，通過Media Queries 限制根元素較大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加較大最小寬度限制，避免默認(rèn)100%寬度的 block 元素跟隨 body 而過大過小
body {
    max-width: 540px;
    min-width: 320px;
}

小結(jié)

相對(duì)于做法一，個(gè)人比較推崇做法二，有以下兩點(diǎn)原因：

第一，做法二相對(duì)來(lái)說(shuō)用戶視覺體驗(yàn)更好，增加了較大最小寬度的限制；

第二，更重要是，如果選擇主流的rem彈性布局方式作為項(xiàng)目開發(fā)的適配頁(yè)面方法，那么做法二更適合于后期項(xiàng)目從 rem 單位過渡到 vw 單位。只需要通過改變根元素大小的計(jì)算方式，你就可以不需要其他任何的處理，就無(wú)縫過渡到另一種CSS單位，更何況vw單位的使用必然會(huì)成為一種更好適配方式，目前它只是礙于兼容性的支持而得不到廣泛的應(yīng)用。

看完了這篇文章，相信你對(duì)“純css3使用vw和vh實(shí)現(xiàn)自適應(yīng)的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章名稱：純css3使用vw和vh實(shí)現(xiàn)自適應(yīng)的示例分析-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://aaarwkj.com/article16/dohpdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、動(dòng)態(tài)網(wǎng)站、用戶體驗(yàn)、網(wǎng)站收錄、營(yíng)銷型網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)