在前端开发中，使用百分比（%）和相对单位（如 em、rem、vw、vh）是实现响应式设计的关键技术之一。这些单位可以根据父元素或视口的大小动态调整元素的尺寸，从而使页面在不同设备和屏幕尺寸上都能良好地显示。
以下是这些单位的详细介绍以及如何使用它们来实现响应式设计：
1. 百分比（%）
百分比单位是相对于父元素的尺寸来计算的。
1.1 使用场景
- 宽度和高度：常用于定义容器的宽度或高度。
- 内外边距：可以用于定义
padding和margin，根据父元素的width计算。
1.2 示例
.container {
width: 80%; /* 容器宽度为父元素宽度的 80% */
margin: 0 auto; /* 水平居中 */
}
.child {
width: 50%; /* 子元素宽度为父容器宽度的 50% */
padding: 5%; /* 内边距为父容器宽度的 5% */
}
1.3 注意事项
- 百分比单位是相对于父元素的尺寸，因此需要确保父元素有明确的尺寸。
- 对于
height，百分比单位通常需要父元素有明确的高度（如100vh或固定值）。
2. em
em 单位是相对于父级元素的字体大小（font-size）来计算的。
2.1 使用场景
- 字体大小：常用于定义文本的字体大小。
- 内外边距：可以用于定义
padding和margin。
2.2 示例
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 24px (16px * 1.5) */
padding: 1em; /* 24px (基于当前元素的 font-size) */
}
2.3 注意事项
em单位是相对于当前元素的font-size，如果嵌套多层，可能会导致尺寸计算复杂。- 如果需要避免嵌套影响，可以使用
rem单位。
3. rem
rem 单位是相对于根元素（<html>）的字体大小（font-size）来计算的。
3.1 使用场景
- 字体大小：常用于定义全局的字体大小。
- 布局尺寸：可以用于定义宽度、高度、内外边距等。
3.2 示例
html {
font-size: 16px; /* 根元素字体大小 */
}
.container {
font-size: 1.5rem; /* 24px (16px * 1.5) */
padding: 2rem; /* 32px (16px * 2) */
}
3.3 注意事项
rem单位不受嵌套影响，适合用于全局布局。- 可以通过调整根元素的
font-size来动态改变页面布局。
4. vw 和 vh
vw（视口宽度单位）和 vh（视口高度单位）是相对于视口（Viewport）的尺寸来计算的。
4.1 使用场景
- 全屏布局：常用于定义全屏容器或背景。
- 响应式字体：可以用于定义根据视口大小动态调整的字体。
4.2 示例
.header {
width: 100vw; /* 宽度为视口宽度的 100% */
height: 50vh; /* 高度为视口高度的 50% */
}
.title {
font-size: 5vw; /* 字体大小为视口宽度的 5% */
}
4.3 注意事项
vw和vh单位是相对于视口尺寸，因此适合用于全屏布局或响应式设计。- 在小屏幕上，
vw和vh可能会导致字体过大或过小，需要结合媒体查询进行调整。
5. 如何使用这些单位实现响应式设计？
5.1 流体网格布局
使用百分比或 vw 定义容器的宽度，使布局能够根据屏幕尺寸动态调整。
.container {
width: 90%; /* 容器宽度为父元素宽度的 90% */
max-width: 1200px; /* 最大宽度限制 */
margin: 0 auto; /* 居中 */
}
.column {
width: 50%; /* 每列占容器宽度的 50% */
float: left;
}
5.2 响应式字体
使用 rem 或 vw 定义字体大小，使字体能够根据屏幕尺寸动态调整。
html {
font-size: 16px;
}
@media (max-width: 768px) {
html {
font-size: 14px; /* 在小屏幕上减小字体大小 */
}
}
.title {
font-size: 2rem; /* 32px (16px * 2) */
}
.subtitle {
font-size: 5vw; /* 字体大小为视口宽度的 5% */
}
5.3 全屏布局
使用 vw 和 vh 定义全屏容器或背景。
.hero-section {
width: 100vw;
height: 100vh;
background-color: lightblue;
}
5.4 结合媒体查询
使用媒体查询根据不同屏幕尺寸调整布局和样式。
/* 默认样式 */
.container {
width: 100%;
padding: 1rem;
}
/* 平板设备样式 */
@media (min-width: 600px) {
.container {
width: 80%;
padding: 2rem;
}
}
/* 桌面设备样式 */
@media (min-width: 900px) {
.container {
width: 60%;
padding: 3rem;
}
}
6. 总结
- 百分比（%）：相对于父元素的尺寸，适合定义宽度、高度和内外边距。
- em：相对于当前元素的字体大小，适合定义字体和内外边距。
- rem：相对于根元素的字体大小，适合全局布局和字体定义。
- vw 和 vh：相对于视口的尺寸，适合全屏布局和响应式字体。
