用rem兼容手机端页面

最新推荐文章于 2024-11-13 11:16:23 发布

原创最新推荐文章于 2024-11-13 11:16:23 发布 · 443 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#rem

移动端专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种基于不同屏幕尺寸调整字体大小的移动端适配方案，通过设置不同的百分比来实现1rem等于100px的布局效果。

移动端设计稿为750px*1134px:

html {
  font-size: 312.5%;
}

@media screen and (max-width: 359px) and (orientation: portrait) {
  html {
    font-size: 266.67%;
  }
}

@media screen and (min-width: 360px) and (max-width: 374px) and (orientation: portrait) {
  html {
    font-size: 300%;
  }
}

@media screen and (min-width: 384px) and (max-width: 399px) and (orientation: portrait) {
  html {
    font-size: 320%;
  }
}

@media screen and (min-width: 400px) and (max-width: 413px) and (orientation: portrait) {
  html {
    font-size: 333.33%;
  }
}

@media screen and (min-width: 414px) and (max-width: 431px) and (orientation: portrait) {
  html {
    font-size: 345%;
  }
}

@media screen and (min-width: 432px) and (max-width: 479px) and (orientation: portrait) {
  html {
    font-size: 360%;
  }
}

@media screen and (min-width: 480px)and (max-width: 639px) and (orientation: portrait) {
  html {
    font-size: 400%;
  }
}

@media screen and (min-width: 640px) and (orientation: portrait) {
  html {
    font-size: 533.33%;
  }
}