移动端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通过工具计算

点击：   

 该工具的用法：

输入自己页面的html font size，上传自己的css代码，然后下载css,就可以了。

---------------------------参考------------------------------------------ 

 

rem单位详细讲解 :  

学习sass:    

sass 编译工具：