4.适配方案实现方式
4.1 rem单位+动态html的font-size(方案一)
rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。
在开发中，我们只需要考虑两个问题:
问题一: 针对不同的屏幕，设置html不同的font-size;
问题二: 将原来要设置的尺寸，转化成rem单位;
这种方案有三种方式实现，
4.1.1第一种方式：媒体查询
可以通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸
<style>
/* 媒体查询 */
@media screen and (min-width:320px) {
html{
font-size: 20px;
}
}
@media screen and (min-width:375px) {
html{
font-size: 24px;
}
}
@media screen and (min-width:414px) {
html{
font-size: 28px;
}
}
@media screen and (min-width:480px) {
html{
font-size: 32px;
}
}
.box {
width: 5rem;
height: 5rem;
background: #8ec04c;
}
</style>
<div class="box">
<p>紫陌学前端</p>
</div>
@media screen and开头的语句就是媒体查询语句。@media后面是一个或者多个表达式，如果表达式为真，则应用样式。@media screen and (min-width:320px) 这句话的意思就是：设备宽度小于320就选中这个样式。
看看实际效果：
媒体查询的缺点:
我们需要针对不同的屏编写大量的媒体查询
如果动态改变尺寸，不会实时的进行更新
4.1.2用js动态获取设备宽度
如果希望实时改变屏幕尺寸时，font-size也可以实时更改，可以通过is代码:
方法:
根据html的宽度计算出font-size的大小，并且设置到html上
监听页面的实时改变，并且重新设置font-size的大小到html上
