css rem

作者：我说°走了就别回来发布日期:2026-06-23 浏览:121

/* 使用 rem 单位设置字体大小 */
html {
  font-size: 16px; /* 设置根元素的字体大小，其他元素的 rem 值会基于此计算 */
}

body {
  font-size: 1rem; /* 相当于 16px */
}

h1 {
  font-size: 2rem; /* 相当于 32px */
}

p {
  font-size: 0.875rem; /* 相当于 14px */
}

/* 使用 rem 单位设置间距 */
header {
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}

解释说明：

rem 是相对于根元素 (<html>) 的字体大小来计算的。根元素的字体大小默认是 16px（浏览器默认值），但你可以根据需要调整。
在上面的例子中，1rem 等于根元素的字体大小，即 16px。
如果你更改了 <html> 元素的 font-size，所有使用 rem 的元素都会相应地调整大小。例如，如果将 html { font-size: 20px; }，那么 1rem 就会变成 20px。
这种方式使得页面布局更加灵活和响应式，尤其是在移动端开发中非常有用。

上一篇：css 文字间距

下一篇：css important