前端移动端适配的常用方法总结

方法一、通过js来实现

(function (doc, win) {
            var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        if(clientWidth>=640){
                            docEl.style.fontSize = '100px';
                        }else{
                            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                        }
                    };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

例子中意思是640px的设计稿，1rem=100px;当设计给的设计稿是750px的，把对应的640改成750即可

还以设计稿为640为例，在不同设备下的HTML元素的font-size大小和实际像素如下

font-size的值：

iPhone5 : (320 / 640) * 100 = 50px

iPhone6 : (375 / 640) * 100 = 58.59375px

iPhone6+: (414 / 640) * 100 =64.6875px

设计稿上标注为30px的尺寸在不同设备上的实际像素：

iPhone5上的某字体: 50 * 0.3rem = 15px

iPhone6上的某字体：58.59375* 0.3rem = 17.578125px

iPhone6+上的某字体: 64.6875 * 0.3rem = 19.40625px

可以看出，不同的设备上的值是不同的，这也就是实现了适配

方法二、通过css来实现

在公共的css里面添加

html {
    font-size: calc(100vw / 6.4);
}

当设计稿为750时，

html {
    font-size: calc(100vw / 7.5);
}