移動端适配（視口單位）

作者：龍時(shí)間：2018-07-12 浏覽：

由于viewport單位得(de)到衆多(duō)浏覽器的(de)兼容，lib-flexible這(zhè)個(gè)過渡方案已經可(kě)以放棄使用(yòng)，不管是現在的(de)版本還(hái)是以前的(de)版本，都存有一定的(de)問題。建議(yì)大(dà)家開始使用(yòng)viewport來(lái)替代此方案。vw的(de)兼容方案可(kě)以參閱《如何在Vue項目中使用(yòng)vw實現移動端适配》一文。

之前，可(kě)以動态的(de)給根元素字體大(dà)小html添加font-size，後來(lái)推出了(le)flexible的(de)方案，從官方github上看，現在也(yě)不推薦使用(yòng)flexible方案，下(xià)面來(lái)看viewport方案，

1vw等于視口寬度的(de) 1%
1vh 等于視口高(gāo)度的(de) 1%
vw 和(hé) vh 中的(de)較小值
vmax — vw 和(hé) vh 中的(de)較大(dà)值

視口，即浏覽器屏幕大(dà)小，1vw 等于浏覽器寬度的(de) 1%，100vw 即整個(gè)浏覽器的(de)寬度。

下(xià)面來(lái)看看viewprot方案的(de)兼容性

利用(yòng)視口單位實現适配：

一、僅僅使用(yòng)vw作爲css單位的(de)唯一單位

a.對(duì)于設計稿的(de)尺寸轉換爲vw單位，我們使用(yòng)Sass函數編譯

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

b.對(duì)于頁面的(de)字體，間距，大(dà)小等尺寸都使用(yòng)vw作爲單位

.vp {
        width: 40vw;
        height: 20vw;
        background: pink;
        color: #000;
        margin-left: auto;
        margin-right: auto;
        font-size: 0.34vw;
        padding-top: 2vm;
  }

c.移動端1物(wù)理(lǐ)像素線（也(yě)就是普通(tōng)屏幕下(xià) 1px ，高(gāo)清屏幕下(xià) 0.5px 的(de)情況）采用(yòng) transform 屬性 scale 實現。

     .border_1px{

            position: relative;
            &::after {
                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%;
                }
            }
        }

二、使用(yòng)vw，搭配rem，此方法更值得(de)推薦

// rem 單位換算(suàn)：定爲 75px 隻是方便運算(suàn)，750px-75px、640-64px、1080px-108px，如此類推
$vw_fontsize: 75; // iPhone 6尺寸的(de)根元素大(dà)小基準值
@function rem($px) {
     @return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大(dà)小使用(yòng) vw 單位
$vw_design: 750;
html {
    font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; 
    // 同時(shí)，通(tōng)過Media Queries 限制根元素最大(dà)最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也(yě)增加最大(dà)最小寬度限制，避免默認100%寬度的(de) block 元素跟随 body 而過大(dà)過小
body {
    max-width: 540px;
    min-width: 320px;
}

上一篇： 3788億美(měi)元市值算(suàn)什(shén)麽！馬雲的(de)終極目标是玩轉5個(gè)全球

下(xià)一篇： vue入門

雲南雲豹網絡科技股份有限公司