H5如何做适配

做手机适配的时候，不能像做web端一样直接写固定值，有几种方法可以让页面在不同宽度屏幕上自适应。
下面的都是以750设计图为例，

1.rem做单位
设font-size75px，那1rem = 75px。根据不同的屏幕获取不同的根元素的font-size。下面的代码可以实现效果，但比较简单。

    var width = document.body.clientWidth;
    var fontSize = 75* (width/750);
    document.documentElement.style.fontSize = fontSize + 'px';

或者下面比较高级的代码：

!function(e,t){
    function n(){
        t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)
    }
    function d(){
        var e=i.clientWidth/10;
        i.style.fontSize=e+"px"
    }
    var i=t.documentElement,o=e.devicePixelRatio||1;
    if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){
        var a=t.createElement("body"),s=t.createElement("div");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)
    }
}(window,document);

2.修改head里的meta标签

    <meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">