移動端自適應布局方案

• 1、通過動態設置 viewport的 width 和 initial-scale

• 2、通過動態設置跟元素Html的font-size 即 rem解決方案

1. 使用meta：

 

1.1 動態改變initalscale

1.2 設置user-scalable=no

 

 

1、meta viewport

meta標簽大家都很熟悉了，首先來看一下meta viewport 的6個屬性：

屬性名	解釋
width	設置viewport 的寬度，為一個正整數，或字符串"width-device"
initial-scale	設置頁面的初始縮放值，為一個數字，可以帶小數
minimum-scale	允許用戶的最小縮放值，為一個數字，可以帶小數
maximum-scale	允許用戶的最大縮放值，為一個數字，可以帶小數
height	設置viewport 的高度，這個屬性並不重要，很少使用
user-scalable	是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許

一般情況下width的值設置為width-device即可，即當前設備的屏幕寬度，我們可以通過window.screen.width獲取。所以要想在不同手機上自適應，我們就要動態的改變initial-scale（初始縮放值），並且設置user-scalable=no禁止用戶手動縮放頁面。

舉一個例子：如果設計師給的尺寸是750px的，如何把750px的設計圖等比縮放到我們當前寬度的手機上呢？假如當前手機的屏幕寬度是恰好是750px，那initial-scale就等於1好了完全不用縮放。假如當前的手機寬度是375px（iphone6/7/8），那豈不是要縮放一倍了（initial-scale=0.5），對的，縮放的倍數就等於當前手機屏幕寬度除以設計圖的寬度。如果設計師給的是640px寬的圖，針對不同的手機initial-scale的值是多少呢？（答案就在上一句）。

所以initial-scale的值是要動態獲取的然后將meta標簽添加到header標簽里面，這就要用js操作dom了（js基礎知識）。見下代碼示例：

<script>
    var _vwidth = window.screen.width;
    var _scale = _vwidth / 750;
    var _meta = document.createElement('meta');
    _meta.setAttribute('name', 'viewport');
    _meta.setAttribute('content', ' width = device - width , user - scalable = no , initial - scale = ' + _scale);
    document.getElementsByTagName('head')[0].appendChild(_meta);
</script>

 

之后就可以根據設計圖給的尺寸大小寫css了，是28px我們就寫28像素，寬度是750px我們就寫750px（當然：也可以寫100%）。

 

 

2、rem布局

1.如果根元素設置fontsize為 100px

  寫代碼的時候所有像素使用rem 就可以了 比如25px寫0.25rem

2.給定一個設計尺寸750px，

　　那么就可以通過動態設置根元素字體大小

　　 100*currentw/750px   （design width）

　　來達到自適應。

  監聽resize事件，動態設置

  這樣就保證了適配

 

 

 ============================================================

 以下是通過js實現自適應，此時是針對750像素設計圖1rem=100px，即設計圖中字體大小為28像素時，我們要設置為0.28rem。還是很好換算的。如果設計圖給的是640px，只需要將結尾處的參數改成640,640即可。

(function(designWidth, maxWidth) {
    var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width > maxWidth && (width = maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = "html{font-size:" + rem + "px;}"
    }
    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle)
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null
    }
    refreshRem();
    win.addEventListener("resize", function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300)
    }, false);
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300)
        }
    }, false);
    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px"
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px"
        }, false)
    }
})(750, 750);