说说手机网页开发 REM 单位的使用

发布于 2018-08-22 22:43:55 字数 827 浏览 1655 评论 0

手机端开发基本都是使用的 REM 作为计量单位,关于什么是 REM 我就不多说了,简单来将就是 1rem 等于 HTML 标签的 font-size 大小,所以根据手机宽度改变相对应的 font-size 大小就可以实现自适应了,媒体查询就只要定义 html 标签的 font-size 大小即可。

  • 首先先说一个常识,浏览器的默认字体大小都是16px,包括 PC 和 移动端的网页。
  • 目前 IE9+、Firefox、Chrome、Safari、Opera 等的主流版本都支持了 rem ,所以在使用上基本不用担心兼容性。

我们拿到的设计稿一般都是 640 宽度的,假设我们这样定义 html 标签的 font-size :

html{
  font-size:20px
}
@media only screen and (min-width:400px){
  html{
    font-size:21.33px!important
  }
}
@media only screen and (min-width:414px){
  html{
    font-size:22.08px!important
  }
}
@media only screen and (min-width:480px){
  html{
    font-size:25.6px!important
  }
}

那么我们将浏览器的响应式定义到 320 的宽度,此时 1rem = 20px ,如果设计稿中的一个按钮宽度是 120px,那么换算成 rem 就是 6rem,在 iPhone 7 Plus 上,按钮的宽度自动被设置为 132.48px,就这样我们只需要响应式的定义 html 标签的字体大小,就可能做到所有元素自适应。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。