一、是什么

可以这样理解，同一套代码在不同分辨率的手机上跑时，页面元素间的间距，留白，以及图片大小会随着变化，在比例上跟设计稿一致。

二、几个像素相关概念

• 物理像素(physical pixel)
  一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
  其值也就是我们常说的分辨率
• 设备独立像素(density-independent pixel)
  也叫密度无关像素，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
  简称dip，也可以称为CSS像素
• 设备像素比(device pixel ratio)
  (简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：
  设备像素比 = 物理像素 / 设备独立像素（ // 在某一方向上，x方向或者y方向）

三、适配方法

• 1. 最常用的是响应式布局了吧
     响应式布局
     就是页面元素的位置随着屏幕尺寸的变化而变化，通常会用百分比来定位，而在设计上需要预留一些可被“压缩”的空间。
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

• 该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。当然maximum-scale=1.0, user-scalable=0不是必需的，是否允许用户手动播放根据网站的需求来定，但把width设为width-device基本是必须的，这样能保证不会出现横向滚动条。

• width能控制layout viewport的宽度，如果不指定该属性，layout viewport将默认为980px或1024px（也可能是其它值，由设备本身决定），如果把layout viewport的宽度设置为移动设备的宽度，那么layout viewport将成为ideal viewport。

• 其实，要把当前的viewport宽度设为ideal viewport的宽度，既可以设置width=device-width，也可以设置initial-scale=1，但有一个小缺陷，就是width=device-width会导致iphone、ipad横竖屏不分，而initial-scale=1会导致IE横竖屏不分，都以竖屏的ideal viewport宽度为准。
  所以，最完美的写法两者都写上去， initial-scale=1 解决 iphone、ipad的缺陷，width=device-width解决IE的缺陷。
  viewport设置移动端自适应的方法：
  <meta name="viewport" content="width=device-width, initial-scale=1">

• 2.Cover布局
  就跟background-size的cover属性一样，保持页面的宽高比，取宽或高之中的较小者占满屏幕，超出的内容会被隐藏。
  此布局适用于主要内容集中在中部，边沿无重要内容的设计。

• 1. Contain布局
     也跟background-size的contain属性那样，保持页面的宽高比，取宽或高之中的较大者占满屏幕，不足的部分会用背景填充。
     但在设计上需要背景为单色，或者是可平铺的背景。

四、如何实现

• 1. 样式缩放

最省事的适配方法，直接用px为单位按视觉进行开发，然后通过计算屏幕与网页的宽高比，用transform:scale来对网页进行全局缩放。

不过此方法会有一个小问题，就是如果网页内有动画的话，缩放后会稍微降低页面性能，在低配的安卓机器上表现的比较明显，iOS上没发现有性能问题。

• 1. Rem缩放

原理跟上面的样式缩放相通，只不过是通过Rem为单位来进行视觉开发，然后通过计算后改变html的front-size来对页面进行缩放。
长度单位rem是相对于html标签的font-size来计算的。例如html标签设置font-size:36px;，同时div设置width:1.2rem;那么这个div的宽度就是1.2rem=36px*1.2=43.2px;
如果加载页面的时候，使用JS根据屏幕的大小动态设置html标签的font-size，随着html标签font-size的值变化，div的1.2rem换算成px的值 也跟着变化，即实现了div随屏幕大小变化而变化，而CSS代码始终是width:1.2rem。以此类推到页面所有的元素。

以淘宝的做法为例
目的：页面大小与设计稿保持一致
原理：设置meta viewport中的scale保证页面大小与设计稿一致，使用rem
思路：
meta viewport中device-width的算法为：设备的物理分辨率/(devicePixelRatio * scale)
而每台设备的devicePixelRatio都是已知的，可通过window.devicePixelRatio获取
JavaScript动态计算设置scale，包括initial-scale，maximum-scale，minimum-scale
动态设置html的font-size，为屏幕分辨率/10
css尺寸为：设计稿标注尺寸/html的font-size

• 简单理解：

  • 设置viewport为设备宽度（这里不一定，但目前先这样足矣）
  • 将viewport分成10rem，并计算出1rem在当前浏览器的像素值，把它赋予html标签的font-size（分成10rem只是为了方便计算而已）
  • 写CSS代码时，遇到要适配的地方，比如width，margin，padding等，就不要再用px了，改成用rem

• 如宽度为400px的设计稿，其中某个图片的宽度设计为20px，那么，CSS的写法就是img{width: 0.5rem;}，计算如下（目前很多编辑器有插件可以帮助换算）

  • 设计稿的宽度视同手机宽度，即假设有一个viewport为400px的手机
  • 将它分成10rem，每个rem为40px;
  • 那么图片宽度20px即为0.5rem;