总结的移动适配方法，希望可以共同学习。
一、根据html根节点方案（rem单位）
updataHtml();
function updataHtml(){
var w = document.documentElement.clientWidth;
document.documentElement.style.fontSize=w/16+'px';
}
window.onresize=function(){
updataHtml();
}
html{font-size: 20px;}
二、手机淘宝的flexible方案（计算太繁琐）
手机淘宝的flexible方案是综合运用rem和px两种单位+js设置scale和html字体
只需要在Web页面的中添加对应的flexible_css.js,flexible.js文件：
例如：
设计师提供的UI宽度比如是640，写css的时候，比如一个div，设计的尺寸是：宽度：200，高度：100，那你就写width:200/640rem;height:100/640rem。
width:200/640rem;不要直接这样写，你要算出200/640的结果。
三、手机腾讯（根据设计稿同比缩放，在加上阀值控制）
我们认为初始化的rem是100，对应的fontsize也是100，基准的屏幕宽度按照320的设计稿，根据当前屏幕的宽高像素比，算出来当前的rem，100比较好算，设置成其他的也无妨，因为你算的是相对比例。
(function() {
var baseFontSize = 100;
var baseWidth = 320;
var clientWidth = document.documentElement.clientWidth || window.innerWidth;
var innerWidth = Math.max(Math.min(clientWidth, 480), 320);
var rem = 100;
if (innerWidth > 362 && innerWidth <= 375) {
rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.9);
}
if (innerWidth > 375) {
rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.84);
}
document.querySelector('html').style.fontSize = rem + 'px';
}());
具体详细：
1、css设置了font-size:100px；
2、引入刚才那个js。
3、比如一个按钮设计稿件是30pxX30px 它是除以100的。最后咱们设置是0.3remX0.3rem。
它在js里面设置了三个区间：
1） var innerWidth = Math.max(Math.min(clientWidth, 480), 320);
2）innerWidth > 362 && innerWidth <= 375
3）innerWidth > 375
网友评论
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<!-- viewport 后面加上 minimal-ui 在safri 体现效果 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 隐藏状态栏/设置状态栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<title></title>
<script type="text/javascript">
(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 / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
万用