web 为什么建议用 em 或 rem 做单位

作者: 科技微讯

日期:

em 和 rem 是什么

em 等于当前元素的以 px 为单位的 font-size 大小, 而当前元素的 font-size 有两种情况, 第一种是给这个元素明确设置了 font-size 属性, 第二种是没有设置, 如果没有设置, 那就是父元素的 font-size, 如果一级级找上去都没有找到 font-size 属性, 那就是浏览器的默认字体大小, 通常是 16px, 但不一定, 而且浏览器的默认字体大小可以由用户更改.

注意 em 的 compounding 现象, 如果当前元素和其父级元素都设置了 font-size 属性, 并且都是 em 单位, 例如都设置为 font-size: 2em, 那当前元素的 font-size 转换为 px 的方法可能是: 16 * 2 * 2 = 64px.

为了避免 compounding 这种可能让人困惑的问题, 可以使用 rem 代替, rem 是 root em 的简称, 总是等于 html 元素的字体大小, 同理, 如果 html 没有设置字体大小, 那就是浏览器的默认字体大小.

为什么用 em 或 rem

设备的默认字体大小通常是比较适合阅读的字体大小, em 和 rem 都可以基于这个数值对元素的大小进行设置, 是比较理想的做法, 在 em 或 rem 前面加一个数字, 就可以方便地设置为默认字体的多少倍, 例如 2rem 是 2 倍 html 字体大小.

有些用户会更改浏览器的默认字体大小, 默认是 16px, 他们可能会改成 20px 等, 以方便自己阅读. 如果开发者使用 px 为单位设置网页的字体大小, 那这个更改并不会影响页面的显示效果, 可能会给用户带来不便.

通常建议使用 em 或 rem, 但有些情况下建议用 px, 例如 border: 1px solid grey 如果把 px 换成 em 可能就不合适了.

em vs. rem

em 和 rem 除了可以设置 font-size 的大小, 还可以用来设置 marginpadding 等属性的大小, 如果你希望这个属性的值根据 font-size 的大小变化而变化, 那就用 em 作单位设置这些属性, 否则都用 rem. 在使用 em 的元素中同时以 rem 为单位设置 font-size 似乎是一种比较好的做法.

  • Size in em if the property scales according to its font-size
  • Size everything else in rem

所以可以默认用 rem, 然后思考这个属性是否需要根据字体大小变化而变化, 如果是就改为 em.


参考资料: REM vs EM – The Great Debate