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;
}
}