移动端web页面如何适配，现有两个方案：
1 设置viewport进行缩放
简单粗暴，使用过程中反应缩放会导致有些页面元素会糊的情况。天猫的web app的首页使用这种方案
在页面中加入viewport.js
var doc = window.document,
docEle = doc.documentElement,
dpr = Math.ceil(window.devicePixelRatio),
vp = document.querySelector('meta[name="viewport"]'),
docWidth = docEle.clientWidth,
r = docWidth / 375;
vp.setAttribute('content', 'width=375,initial-scale=' + r + ',maximum-scale=' + r * dpr + ', minimum-scale=' + r / dpr + ',user-scalable=no');
2 rem能等比例适配所有屏幕
rem是通过根元素进行适配的，网页中的根元素指的是html。我们通过设置html的字体大小就可以控制rem的大小。
在页面中加入common.js
var dpr, rem, scale;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
var docEl = document.documentElement;
dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth / 10;
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果
//metaEl.setAttribute('content', 'width=' + dpr * rem + ',initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no');
// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px;}';
// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
v = parseFloat(v);
return v * rem;
};
window.px2rem = function(v) {
v = parseFloat(v);
return v / rem;
};
window.dpr = dpr;
window.rem = rem;
====================计算相应的rem值=方法============================================
1通过sass，定义函数计算rem
$baseFontSize: 64px !default;
$gray: #cccccc !default; // pixels to rems
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
} body{
font-size:$baseFontSize;
color:lighten($gray,10%);
}
.test{
font-size:pxToRem(30px);
color:darken($gray,10%);
}
编译后的css
body {
font-size: 64px;
color: #e6e6e6; }
.test {
font-size: 0.46875rem;
color: #b3b3b3; }
/*# sourceMappingURL=test.css.map */
2通过工具计算
点击： px转rem工具
该工具的用法：
输入自己页面的html font size，上传自己的css代码，然后下载css,就可以了。
---------------------------参考------------------------------------------
rem单位详细讲解 : webapp变革之rem
学习sass: sass语法