我们拿到的设计图一般是以640，750，1080分辨率为基准设计的，而现在的手机终端各式各样，分辨率不同，逻辑像素不同 ，适口不同，所以为了让我们的页面在每个设备上都可以良好的展示，那么就需要为这些设备做统一的处理，这个过程就称为移动端适配。

需要知道的一些概念：

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，可以理解为我们平时说的分辨率；

设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如 css像素)，然后由相关系统转换为物理像素，在这里可以理解为我们说的视觉视口的大小；

所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

设备像素比(device pixel ratio)

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：

设备像素比 = 物理像素 设备独立像素 在某一方向上，x方向或者y方向

设备像素比也是设备生产的时候设置好的，在javascript中，可以通window.devicePixelRatio获取到当前设备的dpr。

视口(viewport)

pc端视口指浏览器窗口内的内容区域，不包含工具条，滚动条.

移动浏览器中视口分为几种情况

metaname=viewportcontent=“width=device-width,minimum-scale=1.0,maximum-scale=1.0”中content所设置的视口，称为布局视口，最大值由浏览器厂商规定 ,可以document.documentElement.clientWidth获取其宽度.

而我们看到的浏览器的窗口，网页区域的大小，称为视觉视口，用css像素表示(设备逻辑像素)

rem

rem是css3 的一个长度单位 ，相对文档跟元素 html；比如设置html font-size=100px;那么1rem=100px;之后的所有元素都可以用这个基准值来设置大小；

（1）固定高度，宽度自适应(百分比，em)

（2）使用 rem布局

下面总结了网易 淘宝首页使用rem的方案

网易的做法：

1) 将布局适口设置为视觉适口，不进行缩放，即理想适口。

meta name=viewportcontent=initial-scale=1,maximum-scale=1, minimum-scale=1”

2) 以设计稿分辨率为基准，取100px为font-size的参照，那么body元素的宽度就可以设置为  width6.4rem(640100)，当我们将布局视口设置为320时，于是html的 font-size=deviceWidth 6.4。

3) 通过document.documentElement.clientWidth获取 deviceWidth；

4) 当页面的dom ready后设置html font-size,

document.documentElement.style.fontSize =document.documentElement.clientWidth 6.4 + ‘px’
5) 通过 mediaQuery 设置字体大小，字体大小不可以使用rem,原因是误差太大。

以640的设计稿为例最终的设置html font-size代码如下，布局时拿设计稿标注的尺寸除以100，就是rem的值，相当简单啊

淘宝的做法：

原理

1) 通过dpr设置缩放比，实现布局视口大小，

2) 动态计算html的font-size

使用rem布局，实质都是通过动态改写html的font-size基准值，来实现不同设备下的良好统一适配；

网易与淘宝不同 的地方是 ，网易将布局视口设置成了 视觉视口，淘宝将布局视口设置成了物理像素大小，通过 scale缩放嵌入了 视觉视口中；