移动端常见布局rem+less+媒体查询—设置公共common.less

1、新建common.less，设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小
2、常用尺寸有：320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
3、确定将页面划分为多少份。例：15份
4、由于PC端也可以打开移动端首页，默认html大小为750/15=50px，注意由于代码的层叠性需要将其写在最上面

// 普通页面打开 注意：由于页面的层叠性 需将其写在最前面
html{
    font-size:50px;
}
// 设置将页面划分的份数
@num:15;
// 设置常见的屏幕尺寸 修改html文字大小，为了代码更简洁，建议从小到大来写
@media scree and (min-width:320px){
    html{
        font-size: 320px / @num;
    }
}
@media scree and (min-width:360px){
    html{
        font-size: 360px / @num;
    }
}
@media scree and (min-width:375px){
    html{
        font-size: 375px / @num;
    }
}
@media scree and (min-width:384px){
    html{
        font-size: 384px / @num;
    }
}
@media scree and (min-width:400px){
    html{
        font-size: 400px / @num;
    }
}
@media scree and (min-width:414px){
    html{
        font-size: 414px / @num;
    }
}
@media scree and (min-width:424px){
    html{
        font-size: 424px / @num;
    }
}
@media scree and (min-width:480px){
    html{
        font-size: 480px / @num;
    }
}
@media scree and (min-width:540px){
    html{
        font-size: 540px / @num;
    }
}
@media scree and (min-width:720px){
    html{
        font-size: 720px / @num;
    }
}
@media scree and (min-width:750px){
    html{
        font-size: 750px / @num;
    }
}