手淘-网易适配方案

网易的适配方案

设计稿640px取一个100px的font-size为参照 那么body元素的宽度就可以设置为width: 6.4rem，所以html的font-size=deviceWidth/6.4 这个deviceWidth就是viewport设置中的那个deviceWidth，根据这个计算规则，可得出适配方案

deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px

宽高字体都用rem单位
这个deviceWidth通过document.documentElement.clientWidth就能取到了，所以当页面的dom ready后，做的第一件事情就是

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

这个6.4怎么来的，当然是根据设计稿的横向分辨率/100得来的。

下面总结下网易的这种做法
1. 先拿设计稿竖着的横向分辨率除以100得到body元素的宽度：

如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem
如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem

1. 布局时，设计图标注的尺寸除以100得到rem尺寸，

2. 如果采用网易这种做法，视口要如下设置：

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

手淘适配方案

1. 设置头部mate标签

<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

1. 动态设置viewport标签中的scale
device-width=设备的物理分辨率/(devicePixelRatio * scale)
   在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio 。
   devicePixelRatio称为设备像素比，每款设备的devicePixelRatio都是已知，并且不变的，目前高清屏，普遍都是2。
   淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置

这么做目的当然是为了保证页面的大小与设计稿保持一致了，比如设计稿如果是750的横向分辨率，那么实际页面的device-width，以iphone6来说，也等于750，这样的话设计稿上标注的尺寸只要除以某一个值就能够转换为rem了。通过js设置viewport的方法如下

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

1. font-size 的计算
   淘宝布局的第3个要点，就是html元素的font-size的计算公式，font-size = deviceWidth / 10

2. 布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10
   比如说设计稿上某一个元素的宽为150px，换算成rem应该怎么算呢？这个值等于设计稿标注尺寸/该设计稿对应的html的font-size。拿淘宝来说的，他们用的设计稿是750的，所以html的font-size就是75，如果某个元素时150px的宽，换算成rem就是150 / 75 = 2rem。

比较网易与淘宝的做法

共同点

1. 都能适配所有的手机设备，对于pad，网易与淘宝都会跳转到pc页面，不再使用触屏版的页面
2. 都需要动态设置html的font-size
3. 布局时各元素的尺寸值都是根据设计稿标注的尺寸计算出来，由于html的font-size是动态调整的，所以能够做到不同分辨率下页面布局呈现等比变化
4. 容器元素的font-size都不用rem，需要额外地对font-size做媒介查询
5. 都能应用于尺寸不同的设计稿，只要按以上总结的方法去用就可以了

不同点
1. 淘宝的设计稿是基于750的横向分辨率，网易的设计稿是基于640的横向分辨率，还要强调的是，虽然设计稿不同，但是最终的结果是一致的，设计稿的尺寸一个公司设计人员的工作标准，每个公司不一样而已
2. 淘宝还需要动态设置viewport的scale，网易不用
3. 最重要的区别就是：网易的做法，rem值很好计算，淘宝的做法肯定得用计算器才能用好了 。不过要是你使用了less和sass这样的css处理器，就好办多了，以淘宝跟less举例，我们可以这样编写less：

//定义一个变量和一个mixin
@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
    @{name}: @px / @baseFontSize * 1rem;
}
//使用示例：
.container {
    .px2rem(height, 240);
}
//less翻译结果：
.container {
    height: 3.2rem;
}

参考文章

https://www.cnblogs.com/well-nice/p/5509589.html