移动端自适应布局方案

• 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);