相对单位

相对单位是 CSS 中相对于其他元素或视口大小的单位。理解相对单位对于创建响应式设计和灵活的布局至关重要。

相对单位概述

什么是相对单位

相对单位是相对于其他元素或视口大小的单位，它们的值会根据参考元素或视口的变化而变化。

相对单位的特点

• 大小相对，会根据参考元素变化
• 适合响应式设计
• 适合创建灵活的布局
• 提高代码的可维护性

em

基本概念

em 是相对于当前元素的字体大小的单位。

使用方法

/* 使用 em 设置字体大小 */
.container {
  font-size: 16px;
}

.child {
  font-size: 1.5em;  /* 24px */
}

/* 使用 em 设置间距 */
.box {
  padding: 1em 1.5em;
  margin: 1em;
}

/* 使用 em 设置宽度 */
.sidebar {
  width: 20em;
}

实际应用

/* 卡片组件 */
.card {
  font-size: 16px;
  padding: 1.5em 2em;
  margin-bottom: 1.5em;
  background: white;
  border: 1px solid #ddd;
  border-radius: 0.5em;
}

.card h2 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.card p {
  font-size: 1em;
  line-height: 1.5;
}

rem

基本概念

rem 是相对于根元素（html）字体大小的单位。

使用方法

/* 设置根元素字体大小 */
html {
  font-size: 16px;
}

/* 使用 rem 设置字体大小 */
h1 {
  font-size: 2rem;  /* 32px */
}

h2 {
  font-size: 1.5rem;  /* 24px */
}

p {
  font-size: 1rem;  /* 16px */
}

/* 使用 rem 设置间距 */
.container {
  padding: 2rem;
  margin: 1.5rem;
}

实际应用

/* 响应式设计 */
html {
  font-size: 16px;
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

/* 使用 rem 创建响应式设计 */
.container {
  padding: 2rem;
  margin: 1.5rem;
}

.card {
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

p {
  font-size: 1rem;
  line-height: 1.5;
}

%（百分比）

基本概念

百分比是相对于父元素大小的单位。

使用方法

/* 使用百分比设置宽度 */
.container {
  width: 800px;
}

.child {
  width: 50%;  /* 400px */
}

/* 使用百分比设置高度 */
.container {
  height: 400px;
}

.child {
  height: 50%;  /* 200px */
}

/* 使用百分比设置字体大小 */
.container {
  font-size: 16px;
}

.child {
  font-size: 120%;  /* 19.2px */
}

实际应用

/* 响应式布局 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2%;
}

/* 两栏布局 */
.two-column {
  width: 100%;
}

.left-column {
  float: left;
  width: 70%;
}

.right-column {
  float: right;
  width: 30%;
}

/* 三栏布局 */
.three-column {
  width: 100%;
}

.column {
  float: left;
  width: 33.333%;
}

vw（视口宽度）

基本概念

vw 是视口宽度的百分比，1vw 等于视口宽度的 1%。

使用方法

/* 使用 vw 设置宽度 */
.full-width {
  width: 100vw;
}

.half-width {
  width: 50vw;
}

/* 使用 vw 设置字体大小 */
.text {
  font-size: 5vw;
}

实际应用

/* 全屏布局 */
.fullscreen {
  width: 100vw;
  height: 100vh;
}

/* 响应式字体 */
.responsive-text {
  font-size: 5vw;
}

@media (min-width: 1200px) {
  .responsive-text {
    font-size: 60px;
  }
}

vh（视口高度）

基本概念

vh 是视口高度的百分比，1vh 等于视口高度的 1%。

使用方法

/* 使用 vh 设置高度 */
.full-height {
  height: 100vh;
}

.half-height {
  height: 50vh;
}

/* 使用 vh 设置字体大小 */
.text {
  font-size: 5vh;
}

实际应用

/* 全屏布局 */
.fullscreen {
  width: 100vw;
  height: 100vh;
}

/* 英雄区域 */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

vmin（视口最小尺寸）

基本概念

vmin 是视口宽度和高度中较小值的百分比。

使用方法

/* 使用 vmin 设置尺寸 */
.square {
  width: 80vmin;
  height: 80vmin;
}

/* 使用 vmin 设置字体大小 */
.text {
  font-size: 5vmin;
}

实际应用

/* 响应式方块 */
.square {
  width: 80vmin;
  height: 80vmin;
  background: #3498db;
  border-radius: 8px;
}

/* 响应式字体 */
.responsive-text {
  font-size: 5vmin;
}

vmax（视口最大尺寸）

基本概念

vmax 是视口宽度和高度中较大值的百分比。

使用方法

/* 使用 vmax 设置尺寸 */
.box {
  width: 80vmax;
  height: 80vmax;
}

/* 使用 vmax 设置字体大小 */
.text {
  font-size: 5vmax;
}

实际应用

/* 响应式盒子 */
.box {
  width: 80vmax;
  height: 80vmax;
  background: #e74c3c;
  border-radius: 8px;
}

/* 响应式字体 */
.responsive-text {
  font-size: 5vmax;
}

相对单位的对比

em vs rem

/* em - 相对于当前元素的字体大小 */
.container {
  font-size: 16px;
}

.child {
  font-size: 1.5em;  /* 24px */
  padding: 1em;      /* 24px，相对于 child 的字体大小 */
}

/* rem - 相对于根元素的字体大小 */
html {
  font-size: 16px;
}

.container {
  font-size: 1.5rem;  /* 24px */
  padding: 1rem;      /* 16px，相对于 html 的字体大小 */
}

% vs vw/vh

/* % - 相对于父元素 */
.container {
  width: 800px;
}

.child {
  width: 50%;  /* 400px */
}

/* vw/vh - 相对于视口 */
.child {
  width: 50vw;  /* 视口宽度的 50% */
}

相对单位的实际应用

响应式字体

/* 使用 rem 创建响应式字体 */
html {
  font-size: 16px;
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

p {
  font-size: 1rem;
}

响应式间距

/* 使用 em 创建响应式间距 */
.container {
  font-size: 16px;
}

.card {
  padding: 1em 1.5em;
  margin-bottom: 1em;
}

响应式布局

/* 使用百分比创建响应式布局 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.column {
  float: left;
  width: 33.333%;
  padding: 1%;
}

全屏布局

/* 使用视口单位创建全屏布局 */
.fullscreen {
  width: 100vw;
  height: 100vh;
}

相对单位的最佳实践

1. 使用 rem 创建响应式设计

/* 推荐 - 使用 rem */
body {
  font-size: 1rem;
}

.container {
  padding: 2rem;
}

/* 不推荐 - 使用 px */
body {
  font-size: 16px;
}

.container {
  padding: 32px;
}

2. 使用 em 创建组件样式

/* 推荐 - 使用 em */
.card {
  font-size: 1rem;
  padding: 1em 1.5em;
}

/* 不推荐 - 使用 px */
.card {
  font-size: 16px;
  padding: 16px 24px;
}

3. 使用百分比创建响应式布局

/* 推荐 - 使用百分比 */
.container {
  width: 100%;
}

.column {
  width: 33.333%;
}

/* 不推荐 - 使用固定 px */
.container {
  width: 1200px;
}

.column {
  width: 400px;
}

4. 合理使用视口单位

/* 推荐 - 使用视口单位创建全屏布局 */
.hero {
  width: 100vw;
  height: 100vh;
}

/* 不推荐 - 使用视口单位设置所有尺寸 */
.text {
  font-size: 5vw;
  padding: 2vw;
  margin: 1vw;
}

总结

相对单位是相对于其他元素或视口大小的单位：

1. em：相对于当前元素的字体大小
2. rem：相对于根元素的字体大小
3. %：相对于父元素的大小
4. vw：相对于视口宽度的百分比
5. vh：相对于视口高度的百分比
6. vmin：相对于视口宽度和高度中较小值的百分比
7. vmax：相对于视口宽度和高度中较大值的百分比
8. 实际应用：响应式字体、响应式间距、响应式布局、全屏布局
9. 最佳实践：使用 rem 创建响应式设计，使用 em 创建组件样式

记住以下几点：

• 理解不同相对单位的特点和应用场景
• 掌握相对单位的使用方法
• 学会创建响应式设计
• 合理使用视口单位
• 遵循相对单位的最佳实践