移动适配

1.    <script>
    (function (desW) {
        var winW = document.documentElement.clientWidth,
                ratio = winW / desW;
        document.documentElement.style.fontSize = ratio * 100 + "px";
    })(750);
</script>

2.  

var browser = {
versions: function () {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
mobile: !!u.match(/AppleWebKit.*Mobile.*/) //是否为移动终端

};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
};
function insertStyle() {
var //定义屏幕高清度
dpr = 1,

//定义缩放比例
scale = 1,

//获取html节点
docEl = document.documentElement,

//创建style
fontEl = document.createElement('style'),

//查找meta[name="viewport"]节点
metaEl = document.querySelector('meta[name="viewport"]'),
clientW = 0;
//获取屏幕高清度（四舍五入）

dpr = Math.round(window.devicePixelRatio || 1);

//是否为移动设备
if (!browser.versions.mobile) {
//否=自定义宽度480px
clientW = 750;
docEl.style.width = '750px';
docEl.style.margin = '0 auto';
} else {
//是=获取屏幕宽度
clientW = window.screen.width;
}

// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + scale * clientW + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.id = "styleHtml";
fontEl.innerHTML = 'html{font-size:' + clientW / 7.5 + 'px!important;}';
};
insertStyle();

//窗口大小改变刷新页面
window.addEventListener("resize", function () {
var time;
window.clearTimeout(time);
time = setTimeout(function () {
var tynode = document.getElementById("styleHtml");
tynode.parentNode.removeChild(tynode);
insertStyle();
}, 100);
}, false);

3.
CSS部分：

 @media screen and (min-320px){html{font-size:50px;}}
@media screen and (min-360px){html{font-size:56.25px;}}
@media screen and (min-375px){html{font-size:58.59375px;}}
@media screen and (min-400px){html{font-size:62.5px;}}
@media screen and (min-414px){html{font-size:64.6875px;}}
@media screen and (min-440px){html{font-size:68.75px;}}
@media screen and (min-480px){html{font-size:75px;}}
@media screen and (min-520px){html{font-size:81.25px;}}
@media screen and (min-560px){html{font-size:87.5px;}}
@media screen and (min-600px){html{font-size:93.75px;}}
@media screen and (min-640px){html{font-size:100px;}}
@media screen and (min-680px){html{font-size:106.25px;}}
@media screen and (min-720px){html{font-size:112.5px;}}
@media screen and (min-760px){html{font-size:118.75px;}}
@media screen and (min-800px){html{font-size:125px;}}
@media screen and (min-960px){html{font-size:150px;}}