概念的东西就不说了， 直接看方案以及相关的库，谁让我们是 调库大师。 实现我不会，调库我还行。手动狗头😃

1. media

css3 媒体查询:通过媒体查询的方式，编写适应不同分辨率设备的的css样式。 通常需要 UI 出不同大小的 设计稿，然后进行对应开发。该方案往往在响应试网页中使用。

@media screen and (max-width: 320px){
    ....适配iphone4的css样式
}
@media screen and (max-width: 375px){
     ....适配iphone6/7/8的css样式
}
@media screen and (max-width: 414px){
    ....适配iphone6/7/8 plus的css样式
}

缺点：

1. 工作量大 ，后期维护也大。
2. pc h5 都能实现效果。

优点：

1. 只需要修改 css, 就能达到效果。
2. 会自动根据屏幕进行对应的调整

常用库：

Bootsrtap , 以及各种 UI 框架的栅格化系统这里列举 antd 的栅格化。当然还有 element 等。

2. rem

rem 就是根据浏览器 HTML 元素来 font-size 进行相对的大小设置。通过改变 HTML 的 font-size 来实现适配。它们通常情况下，还要搭配 viewport 来动态设置视口。

常用库：

hotcss 手淘宝解决方案flexible.js, postcss-pxtorem 主要使用在工程化的项目中，将你写的 px 转成 rem ,px2rem

优点：

1. 适配性比较好，浏览器均支持。

缺点：

1. 需要进行计算，现在很多可以直接导出 rem 为单位的设计稿。
2. 设置的值若出现小数点的情况不好理解，且有一定的误差， 不直观。

4. vw/vh / 百分比

与 rem 不同的点在于，这时的单位是 vw/vh, 它相对于 viewport 来决定大小。 百分比 相比较与 vw/vh 和 rem， 它是基于父级元素， 并不是根元素。实际使用中需要自己进行对应的布局计算百分比。

常用库：

postcss-px-to-viewport 与 postcss-pxtorem 一样， 它是将单位转换成 vw/vh。

优点：

1. 不需要人为通过 js 操作获取改变根元素的大小，直接用 css 新单位，自动生效。

缺点:

1. 直接进行单位换算时百分比可能出现小数,计算不方便且有误差.也不够直观。
2. 兼容性没有 rem 好。

5. css3 transform / zoom

这应该是目前来说新的一个解决方案。利用 css3 的 transform 在需要的容器进行缩放比例控制。需要注意的是 zoom 属性在 firfox 是不支持的。这种方案在 pc 大屏上比较常用。

常用库： 需自己实现， 实现也比较简单，获取网页可见区域宽度高度，进去计算缩放比例，最后追加到需要缩放的容器上

优点：

1. 完全可控

缺点：

1. 需要浏览器支持 css3
2. 使用在 fixed 定位的元素上存在问题