科技微讯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 的大小，还可以用来设置 margin 和 padding 等属性的大小，如果你希望这个属性的值根据 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。
参考资料:
赞赏
0
0