移动端适配之viewport + rem布局

html头部添加meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

引入rem.js(在这里设计稿尺寸为750px，可自行根据设计稿尺寸设置对应的值)

var fn = function(){

        var dpr = window.devicePixelRatio;

        var html = document.getElementsByTagName("html")[0];

        html.style.fontSize = innerWidth/7.5 + 'px';

        html.setAttribute('data-dpr',dpr);

    }

    fn();

    window.onresize = fn;