使用Rem - SUI 移动开发UI库

返回介绍

使用Rem

发布于 2017-06-10 字数 1164 浏览 1215 评论 0

rem 是相对于 html 元素的 font-size 的一个单位。如果 html 上定义了 font-size: 20px;,则无论在任何地方都是 1rem = 20px 这个大小不会受到父元素的影响。

我们统一使用rem对页面进行整体缩放。强烈建议大家对需要适应页面大小的任何元素都使用 rem 为单位来定义。

我们在 iphone6 上使用 1rem = 20px 来换算。小于 375px 的设备上不做缩小处理,对 大于 375px 宽度的设备进行等比缩放。

关于 rem 可以参考 MDN 上的定义

这个单位代表相对于根元素的 font-size 大小(例如 font-size <html> 元素)。当用在根元素的font-size上面时 ,它代表了它的初始值,默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em,当设置font-size=2rem的时候,就使得页面中1rem的大小相当于html的根字体默认大小的2倍,当然此时页面中字体的大小也是html的根字体默认大小的2倍。

该单位在实际使用中一般用于创建完美的可扩展布局。如果不被目标浏览器支持,可以使用em单位,虽然会稍微复杂一些。

发布评论

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

支持 Markdown 语法,需要帮助?

目前还没有任何评论,快来抢沙发吧!