web开发时,通常使用👇几个单位设置字体大小。
- px 像素
- em 1em 等于父元素的字体尺寸
- rem 1rem 等于根元素(
<html>
)的字体尺寸
px 的问题,当用户使用浏览器扩大或者缩小网页时,使用 px 设置的文字不会被放大或者缩小。尴尬😅 em 解决了 px 的问题,但是由于 em 是基于父元素的,由于父元素的字体大小不同,可能导致 1em 定义的字体大小不相同。 rem 解决了 em 的问题。
结论,请使用 rem。
// 令 1 rem = 10px
html { font-size: 62.5% }
ref: https://www.w3cplus.com/css3/define-font-size-with-css3-rem