（1）使用媒体查询更改HTML的font-size值
（2）页面中所有布局使用rem单位布局
缺点：不能精细的适配到每一个设备，代码量较大
原理：媒体查询获取不同的设备，在不同的设备当中更改根节点的字体大小
之前讲过了媒体查询和rem的布局，但是有没有发现工作量很大呢，所以下面就详细说下这几种布局方式；
html和rem的适配
（1）使用vw单位作为 HTML font-size的单位（计算）
（2）页面所有布局使用rem单位
原理：屏幕大小变化的时候，用vw作为单位的值也会跟着改变，用vw作为根节点的字体大小的单位，所以在不同的屏幕大小或者设备中，根节点的字体大小的值就不一样，rem单位得到的值就不一样
（1）在vscode中的扩展安装cssrem插件，文件—》首选项—》设置—》（搜索cssrem，改变rootfontsize为设计图 / 10的数字）
（2）在页面中使用script标签引入rem.js文件（在js文件的18行把数字改为设计图的大小）
（3）在页面中的布局，量出多少值就写多少，然后使用它转换的rem的值
原理：通过js获取设备的宽度，来计算根节点的字体大小，rem得出来的值就不一样，就到达不同页面能适配
（1）使用sass的函数：
@function vw（$px） {
？ @return （$px / 设计图的宽度） * 100vw;
}
（2）页面中布局
header {
？ height: vw（量出来的值）;
？ background: green;
？ font-size: vw（48）;
？ }
移动端布局使用的单位有哪些？
em、rem、%、vw、vh
上面都是相对单位，可以根据viewport的变化，进行实时的改变；
补充：
用vw作为单位的时候，是会根据窗口的变化 值跟着改变的
根节点使用的字体大小使用vw作为单位，窗口变化的时候，根节点的字体大小也跟着改变
页面中所有使用rem单位布局的值都会跟着改变
这样就达到不同的窗口 元素的尺寸不一样
根节点的字体大小的设置根据 设计图的大小来设置
注意：
rem:根据根节点字体大小的倍数
vw:视窗的宽度的百分比 1vw = 视窗宽度的1%
因为 % 不能为font-size的单位
vw单位 1vw = 屏幕宽度 / 100 = 1%的屏幕宽度
vh单位 1vh=屏幕高度 / 100 = 1%的屏幕高度
但是width：100% == width：100vw；（不准确！！！）
ppi：pixels per inch 像素密度、每英寸所拥有的像素数量；
dpi：dots per inch 每英寸点数、指每英寸的像素
dpr：设备像素比 = 物理像素 / 逻辑像素（物理像素是设备显示的，而逻辑像素是css设置的）
移动端一般设计图大小：
640px / 750px / 1080px
根据设计图大小确定dpr的值：
如过设计图为640px —— dpr为2如果设计图为750px ——dpr为2如果设计图为1080px ——dpr为3
好了，这点非常重要：
以设备的宽为320px为例：给html设置width：100px ，此时元素宽为3.2rem值时充满这个宽度
而给元素设置为 100vw 充满这个宽度 所以又等于320px，所以等价于 ：
100vw：320px = ？vw ：100px
？vw 就等于 100 * 100 / 320 = 31.25 vw
为了方便理解看如下三段代码：
注意：此时的320px是设备宽度，不是设计图的大小尺寸
总结如下计算：
如果设计图为640px，给html设置font-size：31.25vw，如果在设计图中量出来的元素大小为宽76px，高54px，则实际写代码里面的宽高是 76px / dpr 2 = 38px ，38px / 100 = 0.38 rem；
如果设计图为750px，给html设置font-size：26.67vw，如果在设计图中量出来的元素大小为宽76px，高54px，则实际写代码里面的宽高是 76px / dpr 2 = 38px ，38px / 100 = 0.38 rem；
或者这样记忆：
100px ？ vw
750px 的设计图 对应的 设备是 375px
100vw = 375px
26.67vw = 100px
640px 的设计图 对应 设备是 320px
100vw = 320px
31.25vw = 100px
1080px 的设计图 对应的设备 是 360px
100vw = 360px
27.78vw = 100px
注意只需要改变html的font-size的值就可以了；
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery