用这几个单位就可以做自适应布局了，尤其是下面的vh，解决了高度不能使用百分比的问题，很爽。
另外，自适应除去用下面这些单位之外，还可以用width的一些新属性，fill-available、fit-content、max-content、min-content
一、rem
1、使用js来使rem自适应
- 最新领悟重点，关于设计图和量出来的值使用rem：重点为根元素的像素值。我们在js里面把根元素的像素值用读取的屏幕宽度(当然写代码的时候肯定屏幕宽度和设计图宽度一样)除以设计图宽度，即
$("html").width()/设计图宽度，就实现了设计图上1px代表css中的1rem。所以这时候只需要在设计图上面把尺寸量出来，然后后面加上rem就好了，比如设计图上量出来为10px，代码里面就写10rem。
rem是相对于页面根节点即html元素的字体大小的，所以需要用js来动态生成html的字体大小。
下面js，简单说就是根据窗口宽度来动态生成页面根节点上的fontSize，如果页面的所有长度值都是用rem来设置的，就能保证只改变根节点的fontSize就可以改变页面所有的长度。
// js
(function() {
var html = $("html"),
// 下面这个fontSize即rem的宽度
// 这里这个设计图宽度就是设计图的整个的宽度。这样设置了之后1rem就相当于是1px了。所以设计图量出来了是多少px，就可以直接写是多少rem
fontSize = html.width()/设计图宽度 + "px";
html.css("fontSize",fontSize);
console.log(fontSize);
// 原生写法如下
// var html = document.getElementsByTagName("html")[0];
// var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
// html.style.fontSize = oWidth / pwidth * prem + "px";
})();
2、操作css来使rem自适应
- (1)设置html元素字体大小：由于html元素的默认字体大小为16px，所以我们直接设置
html {font-size: 62.5%;}来直接把html的字体大小设置为10px，就相当于1rem相当于10px了。所以其它元素的大小，直接量出来除以10，单位改成rem就好了
- (2)改变rem大小以自适应不同窗口大小：这里主要就是用@media来对html的字体大小进行限制了。
html {font-size: 62.5%; } // 这里设置62.5%，相当于是把根节点设置为10px。即1rem = 10px
// 下面这几个@media就是来做响应式的。根据窗口的缩放比例，就可以来设置下面的html节点是多少。
// 具体来说就是由于编写的时候是有一个设计图的，而不加@media的就代表设计图基于的html字体值。要做响应式，就把设计图的宽度与@media里面的宽度来比较，然后就有一个比值了，就可以把设计图基于的fontsize乘以比值，就是下面的html的fontsize了
@media only screen and (min-width: 481px){html {font-size: 94%!important;}}
@media only screen and (min-width: 561px){html {font-size: 109%!important;}}
@media only screen and (min-width: 641px){html {font-size: 125%!important;}}
body{
font-size:12px; // 这里这个是为了兼容，怕不支持rem才写的
font-size:1.2rem ; // 12÷10=1.2。由于1rem为10px，所以12rem就是12px了
}
p{
font-size:14px;
font-size:1.4rem;
}
二、vh和vw
chrome v66开始已经支持。原则上做响应式布局的话，vh和vw是要优于rem的。但是这个的兼容性较差，不支持ios上面的浏览器，android的浏览器也是7以上才支持；但是rem的话ios上面的浏览器是支持的，android的浏览器几乎都支持。所以还是在PC上面用这个比较好。
这两个单位很好用，有了这个终于可以用响应式的方法来设置高度了，这两个单位，是相对于视口的宽高来进行设置的。1vh相当于viewport高度的1/100，1vw相当于viewport宽度的1/100。如下：
// 下面为设置的占满视口高度的slide
.slide {
height: 100vh;
}
// 下面为设置高度为减去上面的header高度
.slide2 {
height: ~'calc(100vh - @{layout-header-height})';
}
配合css的calc，还有max-content。
三、vmin和vmax
vmin从chrome v26开始已经支持。vmax从chrome v66开始已经支持
这两个单位也很好用。它也是相对于视口的宽高来设置，1vmin表示视口宽高中较小值的1/100，1vmax表示视口宽高中较大值的1/100。如：视口宽度设置为800px，视口高度设置为1080px，则1vmin表示8px，1vmax表示10.8px
四、ex 和 ch
ex和ch单位，与em和rem相似，依赖于当前字体和字体大小。ex表示当前字体em的一半，而ch就不是很清楚了