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