科技微讯

CSS 为什么建议用 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 似乎是一种比较好的做法。

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


参考资料:

暂无评论