css @media rem+百分比布局 响应式布局之媒体查询

@media screen and (min-width:320px){
    html{
        font-size: 5px; !important;
    }
}
@media screen and (min-width:480px){
    html{
        font-size: 10px; !important;
    }
}
@media screen and (min-width:768px){
    html{
        font-size: 14px;!important;
    }
}
@media screen and (min-width:960px){
    html{
        font-size: 16px;!important;
    }
}
@media screen and (min-width:1200px){
    html{
        font-size: 18px;!important;
    }
}
@media screen and (min-width:1330px){
    html{
        font-size: 20px;!important;
    }
}

根据查询到的尺寸来修改根元素html的font-size大小，初始定义为20px,

其余的元素宽度采用百分比设置，高度或者一些div的宽高使用rem做单位，1 rem=20px;

简单换算即可，通过媒体查询动态修改根元素的大小，使得rem 一直在跟着变化，响应式就成功了。