码迷,mamicode.com
首页 > 移动开发 > 详细

移动端媒体查询设置字体大小适配不同机型(rem)

时间:2020-06-28 20:31:08      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:rem   nbsp   设置字体大小   设计   font   设置   idt   imp   htm   

@media screen and (min-width: 320px) {
  html {
    font-size: 8.5333px !important;
  }
}

@media screen and (min-width: 360px) {
  html {
    font-size: 9.6px !important;
  }
}

@media screen and (min-width: 375px) {
  html {
    font-size: 10px !important;
  }
}

@media screen and (min-width: 384px) {
  html {
    font-size: 10.24px !important;
  }
}

@media screen and (min-width: 411px) {
  html {
    font-size: 10.96px !important;
  }
}

@media screen and (min-width: 414px) {
  html {
    font-size: 11.04px !important;
  }
}

@media screen and (min-width: 448px) {
  html {
    font-size: 11.9467px !important;
  }
}

@media screen and (min-width: 480px) {
  html {
    font-size: 12.8px !important;
  }
}

@media screen and (min-width: 512px) {
  html {
    font-size: 13.6533px !important;
  }
}

@media screen and (min-width: 544px) {
  html {
    font-size: 14.5067px !important;
  }
}

@media screen and (min-width: 576px) {
  html {
    font-size: 15.36px !important;
  }
}

@media screen and (min-width: 608px) {
  html {
    font-size: 16.2133px !important;
  }
}

@media screen and (min-width: 640px) {
  html {
    font-size: 17.0667px !important;
  }
}

@media screen and (min-width: 750px) {
  html {
    font-size: 20px !important;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 20.48px !important;
  }
}

@media screen and (min-width: 800px) {
  html {
    font-size: 21.3333px !important;
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 27.3067px !important;
  }
}

 一般的设计稿宽度为375px或者750px;当设计稿为375时,此时的1rem = 10px;当设计稿为750时,此时的1rem = 20px;然后对照着设计稿上的尺寸开发就可以了

移动端媒体查询设置字体大小适配不同机型(rem)

标签:rem   nbsp   设置字体大小   设计   font   设置   idt   imp   htm   

原文地址:https://www.cnblogs.com/wxl99180426/p/13204514.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!