使用Rem
优质
小牛编辑
126浏览
2023-12-01
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单位,虽然会稍微复杂一些。