为什么你的 CSS 应该使用 rem 单位以及如何从像素转换

Source: Dev.to

转换

1rem = 根元素的字体大小（默认通常为 16 px）。

转换公式：

rem = px / 16

参考表

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
28px = 1.75rem
32px = 2rem
36px = 2.25rem
40px = 2.5rem
48px = 3rem
64px = 4rem

在何处使用 rem，何处保留像素

使用 rem 的场景

• 字体大小（始终使用）
• 与文字相邻元素的间距和内边距
• 可读文本容器的最大宽度
• 媒体查询断点（虽然这些始终使用浏览器默认值）

保持像素的场景

• 边框（1 px 边框应保持 1 px）
• 阴影
• 非常小的装饰性元素
• 轮廓

理由： 边框和阴影是视觉装饰，不需要随文字大小而缩放。1 px 边框在任何缩放级别下都保持可见，而 14 px 的字体在放大后会变得难以阅读。

CSS 自定义属性让这更简单

使用自定义属性定义间距尺度，而不是记忆 rem 值：

:root {
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
}

.card {
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: 1rem;
}

现在你是在一个设计系统中思考，而不是单个像素值，并且每个值会自动随用户偏好进行缩放。

PostCSS 与 Sass 函数

Sass 函数

@function rem($px) {
  @return #{$px / 16}rem;
}

.heading {
  font-size: rem(24);      // 1.5rem
  margin-bottom: rem(16); // 1rem
}

PostCSS

使用 postcss-pxtorem 插件可以在编译后的 CSS 中自动将 px 值转换为 rem，并可配置根值。

测试你的 rem 实现

1. 打开浏览器设置。
2. 更改默认字体大小（例如改为 24 px）。
3. 刷新你的网站。

所有使用 rem 的元素应按比例缩放；使用像素的元素则保持不变。如果导航文字变大而其容器没有变化，就说明存在像素/rem 不一致的情况。

一个快速转换工具可在此获取——它支持单个值和批量转换，并可自定义基准大小。写 CSS 时保持该工具打开，可节省时间。