rem css

作者：叶枫殇发布日期:2026-07-23 浏览:104

/* 使用 rem 单位设置元素的字体大小和间距 */

html {
  font-size: 16px; /* 设置根元素字体大小，作为 rem 的基准 */
}

body {
  font-size: 1rem; /* 使用 rem 设置 body 的字体大小，相对于 html 的字体大小 */
  line-height: 1.5rem; /* 行高也使用 rem 单位 */
}

h1 {
  font-size: 2rem; /* h1 的字体大小是 html 字体大小的 2 倍 */
  margin-bottom: 0.5rem; /* 底部外边距为 html 字体大小的一半 */
}

p {
  font-size: 1rem; /* 段落文本使用默认字体大小 */
  margin-bottom: 1rem; /* 底部外边距为 1rem */
}

button {
  padding: 0.5rem 1rem; /* 使用 rem 设置按钮的内边距 */
  font-size: 1rem; /* 按钮内的文本大小 */
}

解释说明：

rem 是相对单位，相对于根元素（<html>）的字体大小。根元素的字体大小通常是浏览器默认的 16px，但你可以通过修改 <html> 的 font-size 来调整整个页面的比例。
使用 rem 可以让页面的布局更加灵活，方便根据不同的屏幕尺寸或用户需求进行缩放。
在上面的代码中，我们通过设置 html { font-size: 16px; } 来确保所有 rem 单位都基于这个基准值。

上一篇：css画一个三角形

下一篇：css文本溢出两行显示省略号