移动端web页面如何适配

移动端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语法 

sass 编译工具： koala   koala使用教程