閒談移動端佈局適配方案

前言

針對現有手上項目的適配方案作的不是很滿意（因爲老項目就很少說了，都是淚😭）。又鑑於自已對移動端適配方案稍微有點了解，以爲一些方法挺有用的，有必要簡單總結一下。固然這是我的理解，若有不妥，歡迎指正。

概念

物理像素：至關於屏幕分辨率。如：4.7寸iPhone是750*1334，這個所指的就是物理像素。

設備獨立像素：此爲邏輯像素，計算機設備中的一個點，css中設置的像素指的就是該像素。老早在沒有 retina 屏以前，設備獨立像素與物理像素是相等的。如：4.7寸iPhone是375*667，這個所指的就是設備獨立像素。

設備像素比：設備像素比(dpr) = 物理像素/設備獨立像素。如：4.7寸的iPhone設備像素比是2。

適配方案

方案1、媒體查詢設置

首先引入meta

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
複製代碼

而後全局引入css

html{
    font-size: 16px;
}

@media only screen and (max-width: 414px){
 html{
        font-size: 64px;
    }
}
@media only screen and (max-width: 375px){
    html{
        font-size: 58px;
    }
}
@media only screen and (max-width: 360px){
    html{
        font-size: 56px;
    }
}
@media only screen and (max-width: 320px){
    html{
        font-size: 50px;
    }
}
複製代碼

最後針對每一個頁面進行採用媒體查詢 (因爲meta標籤scale =1，此時對於移動端而言，css的像素單位px的參照物是設備獨立像素) 適配，當屏幕大於414px統一採用px單位，小於414px採用rem單位。

優勢：rem單位的使用和媒體查詢配合可以達到pc端和移動端佈局的響應式。

缺點：因爲經過css手動設置fontsize，在顯示細節方面不免沒有那麼統一,並且須要對不一樣移動設備的不一樣min-widh進行設置，稍微比較繁瑣一點。

例子

方案2、js動態計算寬度

經過js計算fontsize。

function setHtmlFontSize(baseFontSize) {
        
        const _baseFontSize = baseFontSize || 75;//設計htmlfotnszie
        const ua = navigator.userAgent;
        const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
        const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
        let dpr = window.devicePixelRatio || 1;
        if (!isIos && !(matches && matches[1] > 534)) {
            // 若是非iOS, 非Android4.3以上, dpr設爲1;
            dpr = 1;
        }
        const scale = 1 / dpr;//設備像素比
        let metaEl = document.querySelector('meta[name="viewport"]');
        if (!metaEl) {
            metaEl = document.createElement('meta');
            metaEl.setAttribute('name', 'viewport');
            window.document.head.appendChild(metaEl);
        }
        metaEl.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale);

        document.documentElement.style.fontSize = document.documentElement.clientWidth / (750 / _baseFontSize) + 'px';
    };
複製代碼

此時由於scale的縮放比，css的像素單位px再也不是以設備獨立像素爲參照物，而是物理像素。

優勢：可以很好的適配移動端,同時也解決了1px像素問題。

例子

若要同時適配pc端，則將scale默認設置爲1，不須要根據設備像素比進行縮放。這時和方案一相比，只不過是在設置font-size時是動態計算，其餘步驟就同樣了。

方案三：視口單位適配

vw+vh單位已被大多設備所兼容，是時下最流行的適配方案之一。

以vw做爲佈局單位，方法以下。（使用sass函數編譯 ） //750px做爲設計稿基準

$vm_base: 750; 
@function vm($px) {
    @return ($px / 750) * 100vw;
}

//經過代碼，假如設計稿中元素的寬度是 40px ，那麼就能夠在樣式中寫
.test{
    width:vm(40)
}
複製代碼

附加：

字體適配

長文本字體建議依然採用px而不是rem，這樣能夠在一個固定的屏幕內展現更多內容。

1px像素問題

除了設置viewprot方法以外，還能夠經過transform設置。 如：

.border_1px:before{
          content: '';
          position: absolute;
          top: 0;
          height: 1px;
          width: 100%;
          background-color: #000;
          transform-origin: 50% 0%;
        }
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .border_1px:before{
                transform: scaleY(0.5);
            }
        }
        @media only screen and (-webkit-min-device-pixel-ratio:3){
            .border_1px:before{
                transform: scaleY(0.33);
            }
        }

複製代碼

感謝如下文章:
H5移動端適配總結
移動端適配總結
關於移動端適配，你必需要知道的