css3使用vw和vh實現自適應的代碼執行個體

來源:互聯網
上載者:User
響應式布局的實現依靠媒體查詢( Media Queries )來實現,選取主流裝置寬度尺寸作為斷點針對性寫額外的樣式進行適配,但這樣做會比較麻煩,只能在選取的幾個主流裝置尺寸下呈現完美適配。本文主要和大家介紹了純css3使用vw和vh實現自適應的方法的相關資料,希望能協助到大家。

即使是通過 rem 單位來實現適配,也是需要內嵌一段指令碼去動態計算根項目大小。·

近年來,隨著移動端對視口單位的支援越來越成熟、廣泛,使得我們可以嘗試一種新的辦法去真正地適配所有裝置尺寸。

認識視口單位( Viewport units )

首先,我們要瞭解什麼是視口。

在業界,極為推崇的一種理論是 Peter-Paul Koch (江湖人稱“PPK大神”)提出的關於視口的解釋——在案頭端,視口指的是在案頭端,指的是瀏覽器的可視地區;而在移動端較為複雜,它涉及到三個視口:分別是 Layout Viewport(布局視口)、 Visual Viewport(視覺視口)、Ideal Viewport。

而視口單位中的“視口”,在案頭端,毫無疑問指的就是瀏覽器的可視地區;但是在移動端,它指的則是三個 Viewport 中的 Layout Viewport 。

視口單位中的“視口”

根據CSS3規範,視口單位主要包括以下4個:

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

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

  3. vmin : 選取 vw 和 vh 中最小的那個

  4. vmax : 選取 vw 和 vh 中最大的那個

視口單位區別於%單位,視口單位是依賴於視口的尺寸,根據視口尺寸的百分比來定義的;而%單位則是依賴於元素的祖先元素。

用視口單位度量,視口寬度為100vw,高度為100vh(左側為豎屏情況,右側為橫屏情況)

例如,在案頭端瀏覽器視口尺寸為650px,那麼 1vw = 650 * 1% = 6.5px(這是理論推算的出,如果瀏覽器不支援0.5px,那麼實際渲染結果可能是7px)。

相容性

其相容性如所示,可以知道:在移動端 ios 8 以上以及 Android 4.4 以上獲得支援,並且在 x5 核心中也得到完美的全面支援。

利用視口單位適配頁面

對於移動端開發來說,最為重要的一點是如何適配頁面,實現多終端的相容,不同的適配方式各有千秋,也各有缺點。

就主流的響應式布局、彈性布局來說,通過 Media Queries 實現的布局需要配置多個響應斷點,而且帶來的體驗也對使用者十分的不友好:布局在響應斷點範圍內的解析度下維持不變,而在響應斷點切換的瞬間,布局帶來斷層式的切換變化,如同卡帶的唱機般“哢哢哢”地一下又一下。

而通過採用rem單位的動態計算的彈性布局,則是需要在頭部內嵌一段指令碼來進行監聽解析度的變化來動態改變根項目字型大小,使得 CSS 與 JS 耦合了在一起。

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

答案是肯定的,通過利用視口單位實現適配的頁面,是既能解決響應式斷層問題,又能解決指令碼依賴的問題的。

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

在僅使用 vw 單位作為唯一應用的一種 CSS 單位的這種做法下,我們遵守:

1.對於設計稿的尺寸轉換為vw單位,我們使用Sass函數編譯

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

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

.mod_nav {    background-color: #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);            }        }    }}

3.1物理像素線(也就是普通螢幕下 1px ,高清螢幕下 0.5px 的情況)採用 transform 屬性 scale 實現。

//code from http://caibaojian.com/vw-vh.html.mod_grid {    position: relative;    &::after {        // 實現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.對於需要保持高寬比的圖,應改用 padding-top 實現

.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;     }}

由此,我們能夠實現一個常見布局的頁面效果如下:

做法二:搭配vw和rem,布局更最佳化

這樣的頁面雖然看起來適配得很好,但是你會發現由於它是利用視口單位實現的布局,依賴於視口大小而自動縮放,無論視口過大還是過小,它也隨著視口過大或者過小,失去了最大最小寬度的限制。

當然,你可以不在乎這樣微小的不友好使用者體驗,但我們還是嘗試下追求修複這樣的小瑕疵吧。

於是,聯想到不如結合rem單位來實現布局?rem 彈性布局的核心在於動態改變根項目大小,那麼我們可以通過:

  1. 給根項目大小設定隨著視口變化而變化的 vw 單位,這樣就可以實現動態改變其大小。

  2. 限制根項目字型大小的最大最小值,配合 body 加上最大寬度和最小寬度

這樣我們就能夠實現對布局寬度的最大最小限制。因此,根據以上條件,我們可以得出代碼實現如下:

// 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;}

小結

相對於做法一,個人比較推崇做法二,有以下兩點原因:

第一,做法二相對來說使用者視覺體驗更好,增加了最大最小寬度的限制;

第二,更重要是,如果選擇主流的rem彈性布局方式作為項目開發的適配頁面方法,那麼做法二更適合於後期項目從 rem 單位過渡到 vw 單位。只需要通過改變根項目大小的計算方式,你就可以不需要其他任何的處理,就無縫過渡到另一種CSS單位,更何況vw單位的使用必然會成為一種更好適配方式,目前它只是礙於相容性的支援而得不到廣泛的應用。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.