移动端自适应布局

 网易的适配：

通过js去设置html的font-size,假设你的设计稿是640px，为了计算方便去用一个100 px做参考，看一下的他的js写法

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

这个6.4怎么来的，用640/100=6.4rem;

也就相当于1rem=100 px；他的设计稿是640px；也就是说当他的屏幕宽度是640px时，他的font-size：100 px；然后你如果现在要设置一个宽度为150 px的div块，那么他的宽度用rem设置就是150/100=1.5rem；但是这个的前提是

<meta name="viewport" content="initial-scale=0.3,maximum-scale=1,minimum-scale=1">

如果设置字体大小，用媒体查询分别设置。

淘宝的适配：

也通过js去设置html的font-size，

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

淘宝是通过scale去放大缩小屏幕，

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

我觉得淘宝的意思是，假如现在屏幕是750px；然后我把屏幕的字体弄成750/10=75px；也就是说我的1rem=75px；所以我计算的时候，比如我要计算150px的rem值，所以150/75=2；在手机上我的150px就是2rem；但是这样算的时候比较麻烦，如果你的项目中用到less/scss时，就比较简单了，在scss中写一个函数，当计算rem你传一个值，自动编译的时候，他就会自动生成对应的rem，

@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
    @{name}: @px / @baseFontSize * 1rem;
}

//使用示例：

.container {
    .px2rem(height, 240);
}

//less翻译结果：
.container {
    height: 3.2rem;
}

说一下网易和淘宝适配的区别：

1.都动态设置了html的font-size，

2.容器的font-size都没用rem设置，

3.都能适应各种设备

4.淘宝要修改一个viewport 

5.淘宝基于750px；网易基于640px；

6.网易的做法，很好计算，淘宝的做法，计算很麻烦。但是用css预处理器就比较简单了。

以上都是自己的理解，如有错误，请提出。

参考原文：http://caibaojian.com/mobile-responsive-example.html