移动端适配

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上