在前端开发中，自适应布局（Responsive Design）是一种让网页能够适应不同屏幕尺寸、设备和分辨率的技术。常见的自适应布局方法包括 流式布局、弹性布局（Flexbox）、栅格布局（Grid）、媒体查询（Media Queries）、rem/vw/vh 等单位 以及 CSS 框架（如 Bootstrap）。
1. 媒体查询（Media Queries）
媒体查询 是 CSS 实现自适应布局的核心技术之一，允许根据屏幕尺寸、设备类型、分辨率等条件来应用不同的 CSS 样式。
示例：针对不同设备应用不同的 CSS
/* 默认样式：适用于大屏幕设备 */
body {
font-size: 18px;
background-color: lightblue;
}
/* 平板设备（屏幕宽度小于 1024px 时） */
@media screen and (max-width: 1024px) {
body {
font-size: 16px;
background-color: lightgreen;
}
}
/* 手机设备（屏幕宽度小于 768px 时） */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
background-color: lightcoral;
}
}
原理：
- 当屏幕宽度小于 1024px 时，字体大小调整为
16px，背景变为绿色。 - 当屏幕宽度小于 768px 时，字体大小调整为
14px，背景变为红色。
适用场景：
- 适用于不同设备的 UI 适配，如 PC、平板、手机。
- 可以精细控制不同屏幕下的布局和样式。
2. 弹性布局（Flexbox）
Flexbox（弹性盒模型） 是 CSS3 提供的一种强大的布局方式，适用于一维（单行或单列）布局，能够自动调整子元素的大小和位置，以适应不同的屏幕尺寸。
示例：使用 Flexbox 让页面元素自动调整
.container {
display: flex;
flex-wrap: wrap; /* 自动换行 */
justify-content: space-between; /* 平均分布 */
}
.item {
width: 30%;
height: 100px;
background-color: skyblue;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 18px;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
原理：
display: flex;让.container变成一个 弹性盒子。flex-wrap: wrap;允许子元素自动换行，适应小屏幕。justify-content: space-between;使子元素平均分布。
适用场景：
- 适用于 水平、垂直居中布局。
- 等比伸缩 的布局，如 导航栏、卡片式布局、列表。
3. 栅格布局（CSS Grid）
Grid（CSS 栅格布局） 是 CSS3 提供的一种二维布局方式，可以定义行（row）和列（column），创建复杂的响应式布局。
示例：使用 CSS Grid 创建响应式网格布局
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.item {
background-color: lightseagreen;
padding: 20px;
text-align: center;
color: white;
font-size: 18px;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
原理：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));auto-fit自动填充合适的列数。minmax(200px, 1fr)让列的最小宽度为200px，最大宽度自动扩展。
gap: 10px;控制网格间距。
适用场景：
- 适用于 复杂的网格布局，比如 新闻网站、相册。
- 自适应表格 和 卡片式布局。
4. 使用 rem、vw 和 vh 单位
4.1 rem（相对字体大小）
rem 是相对于 HTML 根元素（<html>）的 font-size 进行计算的，适用于字体大小的自适应设计。
html {
font-size: 16px; /* 默认字体大小 */
}
h1 {
font-size: 2rem; /* 2 × 16px = 32px */
}
p {
font-size: 1rem; /* 1 × 16px = 16px */
}
4.2 vw 和 vh（视口单位）
vw（视口宽度的百分比）和 vh（视口高度的百分比）可以用于适应不同的屏幕尺寸。
.container {
width: 80vw; /* 视口宽度的 80% */
height: 50vh; /* 视口高度的 50% */
}
适用场景：
rem适用于 字体自适应。vw/vh适用于 全屏背景、弹窗、视频播放区域。
5. 使用 CSS 框架（如 Bootstrap）
Bootstrap 是一个流行的前端框架，提供了内置的 响应式栅格系统，能够快速构建适配各种设备的网页。
示例：使用 Bootstrap 实现自适应布局
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 响应式布局</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-12">栏目1</div>
<div class="col-md-4 col-sm-6 col-12">栏目2</div>
<div class="col-md-4 col-sm-6 col-12">栏目3</div>
</div>
</div>
</body>
</html>
原理：
col-md-4代表 中等屏幕（≥768px）占 4 列，col-sm-6代表 小屏幕（≥576px）占 6 列，col-12代表 超小屏幕（<576px）占满 12 列。- 通过 Bootstrap 的 栅格系统，可以自动调整列的排列方式，适应不同设备。
适用场景：
- 适用于 企业网站、后台管理系统，能够快速搭建自适应页面。