rem+媒体查询实现web移动端适配

在css中引入以下代码

@media (min-width: 240px) {
    html {
        font-size: 32px;
    }
}

@media (min-width: 320px) {
    html {
        font-size: 42.66667px;
    }
}

@media (min-width: 360px) {
    html {
        font-size: 48px;
    }
}

@media (min-width: 375px) {
    html {
        font-size: 50px;
    }
}

@media (min-width: 384px) {
    html {
        font-size: 51.2px;
    }
}

@media (min-width: 411px) {
    html {
        font-size: 54.8px;
    }
}

@media (min-width: 414px) {
    html {
        font-size: 55.2px;
    }
}

@media (min-width: 424px) {
    html {
        font-size: 56.53333px;
    }
}

@media (min-width: 480px) {
    html {
        font-size: 64px;
    }
}

例如：没有用媒体查询时

div{
   width:50px;
   height:50px;
}

使用媒体查询后

div{
   width:1rem;
   height:1rem;
}

50px = 1rem