rem布局
REM 布局(flexible)demo
优点：rem 的兼容性能低到 ios 4.1，android 2.1
缺点：
- 等比放大（可以说优点也可以理解为缺点，不同场景下使用） 用户选择大屏幕有几个出发点，有些人想要更大的字体，更大的图片，有些人想要更多的内容，并不想要更大的图标
- 字体大小不能使用 rem（一般使用媒体查询控制 font-size 大小）
- 在 PC 端浏览破相，一般设置一个最大宽度
var clientWidth = document.documentElement.clientWidth;
clientWidth = clientWidth < 780 ? clientWidth : 780;
document.documentElement.style.fontSize = clientWidth / 100 'px';
body {
margin: auto;
width: 100rem;
}
- 如果用户禁止 js 怎么办？ 添加 noscripe 标签提示用户 <noscript>开启JavaScript，获得更好的体验</noscript> 给 HTML 添加一个 默认字体大小
相关技术方案：flexible（amfe-flexible 或者 lib-flexible） postcss-pxtorem
Viewport 布局——天不生我VW，适配万古如长夜vw 是基于 Viewport 视窗的长度单位，这里的视窗（Viewport） 指的是浏览器可视化的区域，而这个可视区域是 window.innerWidth/window.innerHeight 的大小
根据 CSS Values and Units Module Level 4： vw 等于初始包含块（html元素）宽度的1%，也就是
- 1vw 等于 window.innerWidth 的数值的 1%
- 1vh 等于 window.innerHeight 的数值的 1%
看图理解
屏幕的宽高
在说 rem 布局时，曾经举过 x 的例子，x 就是 vw
/* rem 方案 */
html { font-size: width / 100}
div { width: 26.67rem }
/* vw 方案 */
div { width: 26.67vw }
vw 还可以和 rem 方案结合，这样计算 html 字体大小就不需要 js 了
html { font-size: 1vw }
div {width: 26.67rem }
效果如下：
vw适配
vw 适配是 CSS 原生支持，而且目前兼容性大多数手机是支持的，也不需要加载 js ，也不会因为 js引发性能问题
vw 确实看上去很不错，但是也存在一些问题
- 也没能很好的解决 1px 边框在高清屏下的显示问题，需要自行处理
- 由于 vw 方案是完全的等比缩放，在 PC 端上会破相（和 rem一样）
相关技术方案：postcss-px-to-viewport
VW 布局demo
px适配——一力降十会不用 rem/vw，用传统的响应式布局也能在移动端布局中使用，需要设计规范
使用css 变量适配（篇幅原因暂不详细介绍，可直接看代码）
使用场景：新闻、内容型的网站，不太适用 rem，因为大屏用户想要看到更多的内容，如网易新闻、知乎、taptap
PX CSS变量 demo
媒体查询——可有我一席？上文讲到我司原先H5端采用媒体查询的方式来做适配，笔者尝试复刻了下，只能说大差不差，能看出媒体查询想做成这件事，但还是心有余而力不足
采用rem、vw、px等方法能实现非标准尺寸（375 * 667设计稿）下 header 的高度为 165.59px，而 media 因为大屏，将根font-size 设置为17px，结果 header 的高度成为 159.38px（17 * 9.375rem）
如下GIF所示：
媒体查询布局与其他布局对比
所以说仅用媒体查询还是差强人意
媒体查询布局demo
各种适配的对比vw、rem 适配的本质都是等比例缩放，px 直接写，孰优孰劣看自己
REM布局 VW布局 PX css变量布局 容器最小宽度 支持 不支持 支持 容器最大宽度 支持 不支持 支持 高清设备1px边框 支持 支持 支持 容器固定纵横比 支持 支持 支持 优点 1.老牌方案
2.支持高清设备1px边框时，可按以往方式直接写 1.无需引入js
2. 天然支持，写法规范 同VW 缺点 1. 需要引入 js 设置 html 的font-size
2. 字体大小不能使用 rem
3. 在 PC 端浏览会破相，一般需设置最大宽度 1.在PC端会破相
2.不支持老旧手机 同VW
除此之外，还有搭配 vw 和rem 的方案
- 给根元素大小设置随着视窗变化而变化的vw单位，动态变化各元素大小
- 限制根元素字体大小的最大最小值，配合body加上最大宽度和最小宽度
// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
@return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
// 同时，通过Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
max-width: 540px;
min-width: 320px;
}高清方案1像素问题
1像素指在 Retina 屏显示 1单位物理像素
很好理解，CSS 像素（设备独立像素）是我们人为规定的，当 DPR 为 1 时，1像素（指我们写的 CSS 像素） 等于 1物理像素；但当 DPR 为 3 时，1像素就为 3 物理像素
- DPR = 1，此时 1 物理像素 等于 1 CSS 像素
- DPR = 2，此时 1 物理像素等于 0.5 CSS 像素 border-width: 1px，这里的 1px 其实是 1 CSS 像素宽度，等于 2 物理像素，设计师其实想要的是 border-width: 0.5px
- DPR = 3，此时 1 物理像素等于 0.33 CSS 像素 设计师想要的是 border-width: 0.33px
