媒体查询下移动端配方案

时间:2021-01-04 18:03:12

//设置常用的body
html{
    font-size: 50px;
}
@no:15;
@media screen and (min-width:320px) {
  html{
      font-size: 320px/@no;
  }
}
@media screen and (min-width:360px){
    html{
        font-size: 360px/@no;
    }
}
/* iphone 678 */
@media screen and (min-width:375px) {
    html{
        font-size: 375px/@no;
    }
}
@media screen and (min-width:384px) {
    html{
        font-size: 384px/@no;
    }
}
@media screen and (min-width:400px) {
    html{
        font-size: 400px/@no;
    }
}
@media screen and (min-width:414px) {
    html{
        font-size: 414px/@no;
    }
}
@media screen and (min-width:424px) {
    html{
        font-size: 424px/@no;
    }
}
@media screen and (min-width:480px) {
    html{
        font-size: 480px/@no;
    }
}
@media screen and (min-width:540px) {
    html{
        font-size: 540px/@no;
    }
}
@media screen and (min-width:720px) {
    html{
        font-size: 720px/@no;
    }
}
@media screen and (min-width:750px) {
    html{
        font-size: 750px/@no;
    }
}