使用rem作为主要单位

在现代Web开发中，响应式设计已成为标配。为了实现灵活的布局和良好的用户体验，选择合适的CSS单位至关重要。

什么是rem单位

rem（root em）是相对于根元素（通常是<html>）字体大小的单位。如果根元素的字体大小为16px，那么1rem就等于16px。

为什么推荐使用rem

优点

一致性：所有尺寸都基于根字体大小，保持比例一致
可访问性：用户调整浏览器默认字体大小时，整个布局会按比例缩放
响应式友好：只需改变根字体大小即可调整整个布局
维护性：计算相对简单，易于维护

反面例子：过度依赖px单位

css 复制代码

/* 不推荐 - 使用px单位 */
.container {
  width: 1200px;
  padding: 15px;
  margin-bottom: 20px;
}

.button {
  font-size: 14px;
  padding: 8px 16px;
}

问题：当用户调整浏览器默认字体大小时，这些固定尺寸不会相应变化，可能导致可访问性问题。

正确使用rem的规范

1. 设置基准字体大小

scss 复制代码

/* 推荐 - 设置根元素字体大小 */
html {
  font-size: 62.5%; /* 使得1rem = 10px (基于浏览器默认16px) */
}

/* 或者更灵活的方式 */
html {
  font-size: 100%; /* 保持默认16px */
}

@media (min-width: 768px) {
  html {
    font-size: 112.5%; /* 18px */
  }
}

2. 使用rem定义尺寸

scss 复制代码

/* 推荐 - 使用rem单位 */
.container {
  width: 120rem; /* 1200px (如果1rem=10px) */
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.button {
  font-size: 1.4rem;
  padding: 0.8rem 1.6rem;
}

3. 结合em用于局部缩放

scss 复制代码

/* 推荐 - 在需要局部比例缩放时使用em */
.card {
  font-size: 1.6rem;
  
  &__title {
    font-size: 2em; /* 相对于父元素的1.6rem，即3.2rem */
    margin-bottom: 0.5em; /* 相对于3.2rem，即1.6rem */
  }
}

反面例子：rem与px混用不当

scss 复制代码

/* 不推荐 - rem和px混用导致比例失调 */
.header {
  height: 6rem; /* 60px */
  padding: 15px; /* 混合单位 */
  margin-bottom: 2rem; /* 20px */
}

问题：混合使用单位会导致布局在不同缩放级别下比例失调。

特殊情况处理

1. 边框宽度

scss 复制代码

/* 推荐 - 边框通常使用px */
.button {
  border: 1px solid #ccc; /* 边框通常不需要缩放 */
  border-radius: 0.4rem; /* 圆角可以缩放 */
}

2. 媒体查询

scss 复制代码

/* 推荐 - 媒体查询使用em或rem */
@media (min-width: 64em) { /* 1024px (如果1em=16px) */
  .container {
    max-width: 120rem;
  }
}

反面例子：媒体查询使用px

scss 复制代码

/* 不推荐 - 媒体查询使用px */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }
}

问题：当用户缩放页面时，基于px的断点不会相应调整，可能导致布局问题。

SCSS中的rem使用技巧

1. 创建rem转换函数

scss 复制代码

/* 推荐 - 创建rem转换函数 */
@function rem($pixels, $context: 16) {
  @return ($pixels / $context) * 1rem;
}

.element {
  padding: rem(20); /* 1.25rem */
  margin: rem(10) rem(15); /* 0.625rem 0.9375rem */
}

2. 创建间距系统

scss 复制代码

/* 推荐 - 创建基于rem的间距系统 */
$spacing-unit: 0.8rem;
$spacing: (
  'xs': $spacing-unit * 0.5,  /* 0.4rem */
  'sm': $spacing-unit,        /* 0.8rem */
  'md': $spacing-unit * 2,    /* 1.6rem */
  'lg': $spacing-unit * 3,    /* 2.4rem */
  'xl': $spacing-unit * 4     /* 3.2rem */
);

@function spacing($size) {
  @return map-get($spacing, $size);
}

.section {
  margin-bottom: spacing('lg'); /* 2.4rem */
}

结论

使用rem作为主要CSS单位能够创建更加灵活、可访问和可维护的样式系统。通过设置合理的基准大小、避免单位混用以及利用SCSS的函数和变量，可以充分发挥rem的优势。同时，需要根据具体情况合理使用px、em等其他单位，以达到最佳的开发体验和用户体验。

记住：rem不是万能的，但作为主要单位使用时，它能带来显著的开发效率和可维护性提升。