1.rem解决的问题
页面布局文字随着屏幕大小变化而变化 高度可以变化 屏幕变化的时候元素宽度和高度等比例缩放
解决文字大小和元素高度的自适应
2.rem单位
rem是相对于html元素字体大小来说的，em是相对于自身元素的font-size值来说的
优点：可以通过修改html里的文字大小来改变页面元素中的大小
px是固定单位，em和rem是相对单位，em相对的是自身的，rem相对的是html的
3.flexible.js + rem单位
head标签中 引入<script src="./XX"></script>
flexible.js的作用：将视口的宽度除以10设置给html的font-size
1rem永远等于10%的视口宽度
给定一个2倍图设计稿的时候，先宽度除以2，在除以屏幕的宽度的10%，即得到所要计算的rem值
4.媒体查询 Media Query
@media针对不同的屏幕尺寸设置不同的样式 按从小到大的顺序写（推荐）或从大到小
作用：根据不同的设备屏幕来设置不同的css样式
语法：@media mediatype and|not|only （media feature）{
CSS代码； and：且 not：非 only：指定的媒体类型
media feature：媒体特性 width：宽度 max-width：最大的宽度 min-width：最小的宽度
媒体查询+rem实现元素变化
引入资源 <link rel="stylesheet" href="XXX.css" media="媒体查询语句">
4.rem适配方案原理
（1）让一些不能等比例适应的，达到当设备尺寸发生改变时，等比例适配当前设备
（2）根据媒体查询加rem实现
rem适配方案技术使用：
（1）less、媒体查询、rem
公式：页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）
屏幕宽度/划分的份数=html font-size的大小
所以最后的rem值：页面元素值（px）/ html里面的文字的大小
（2）flexble.js、rem（更简单）
5.vw/vh
vw : 1vw = 1%视口宽度 vh : 1vh = 1%视口高度 （注意：由于在实现元素宽度、高度、字体大小等自适应时，都是依据视口 的宽度，所以一般只会使用vw，很少使用vh）
vw/vh相对的是视口的宽度和高度，width和height相对的是父元素的宽度和高度