rem 是网页上的一种长度单位。
如果根节点(html 节点)的字体大小是 16px,那么:
- 2rem 就等同于 32px;
- 3rem 就等同于 48px;
- 1.5rem 就等同于 24px;
也就是:
html{
font-size: 14px;
}
.target{
width: 2rem; /* 28px */
}
有时为了方便计算,会把根节点的字体设置成 10 的倍数,比如
html {
font-size: 100px;
}
.another-target{
font-size: 0.16rem; /* 16px */
width: 1rem; /* 100px */
}
有时在 2 倍屏上,会有这种计算技巧
html{
font-size: 50px;
}
.another-another-target{
width: 1rem; /* 50px,但因为是 2 倍屏,所以其实是 100px */
}