响应式布局能够让网页在不同尺寸的设备上都能呈现出合适的展示效果，是前端开发必备的核心技能，CSS提供了多种实现响应式设计的方法，开发者可以根据实际需求选择合适的方案。
一、使用媒体查询实现响应式
媒体查询是CSS响应式设计的基础，它可以根据设备的屏幕尺寸、分辨率等特征应用不同的样式规则，最常用的场景是根据屏幕宽度调整布局。
媒体查询的基本语法如下：
/* 默认样式，适配小屏幕 */
.container {
width: 100%;
padding: 10px;
}
/* 当屏幕宽度大于等于768px时应用以下样式 */
@media screen and (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* 当屏幕宽度大于等于1200px时应用以下样式 */
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
二、使用相对单位替代固定单位
固定单位如px不会随屏幕尺寸变化，而相对单位可以根据父元素或根元素的大小自适应调整，是响应式布局的重要辅助手段。
- rem：相对于根元素<html>的字体大小，默认1rem等于16px，可通过设置根元素字体大小统一调整所有rem单位的尺寸
- em：相对于当前元素的字体大小，嵌套使用时计算规则会逐层叠加
- vw/vh：相对于视口的宽度和高度，1vw等于视口宽度的1%，1vh等于视口高度的1%
- %：相对于父元素的对应属性值，常用于设置宽度、高度等属性
以下是相对单位的使用示例：
/* 设置根元素字体大小为10px，方便计算rem */
html {
font-size: 10px;
}
/* 此时1.6rem等于16px */
.text {
font-size: 1.6rem;
/* 宽度为视口宽度的80% */
width: 80vw;
/* 内边距相对于父元素宽度 */
padding: 2%;
}
三、弹性盒子flexbox布局
flexbox是一种一维布局模型，能够轻松实现元素的弹性排列，自动分配空间，非常适合响应式布局中的水平或垂直排列场景。
flexbox的核心属性分为容器属性和项目属性两类，常用容器属性如下：
| 属性名 | 作用说明 |
|---|---|
| display: flex | 将元素设置为flex容器，子元素自动成为flex项目 |
| flex-direction | 设置主轴方向，可选row、row-reverse、column、column-reverse |
| justify-content | 设置主轴上项目的对齐方式，可选flex-start、flex-end、center、space-between等 |
| align-items | 设置交叉轴上项目的对齐方式，可选flex-start、flex-end、center、stretch等 |
| flex-wrap | 设置项目是否换行，可选nowrap、wrap、wrap-reverse |
flexbox响应式布局示例：
.flex-container {
display: flex;
/* 小屏幕下垂直排列 */
flex-direction: column;
gap: 10px;
}
.flex-item {
padding: 15px;
background-color: #f0f0f0;
}
/* 屏幕宽度大于等于768px时水平排列 */
@media screen and (min-width: 768px) {
.flex-container {
flex-direction: row;
justify-content: space-between;
}
.flex-item {
/* 每个项目占30%宽度 */
flex: 0 0 30%;
}
}
四、网格grid布局
grid是二维布局模型，能够同时处理行和列的布局，适合实现复杂的响应式页面结构，比flexbox更适合多行多列的布局场景。
grid布局的核心是通过grid-template-columns和grid-template-rows定义网格轨道，结合媒体查询可以轻松调整不同屏幕下的网格结构。
grid响应式布局示例：
.grid-container {
display: grid;
/* 小屏幕下1列布局 */
grid-template-columns: 1fr;
gap: 15px;
padding: 10px;
}
.grid-item {
padding: 20px;
background-color: #e8e8e8;
}
/* 中等屏幕下2列布局 */
@media screen and (min-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
/* 大屏幕下4列布局 */
@media screen and (min-width: 1200px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
}
}
五、移动优先的响应式策略
移动优先是指先编写适配小屏幕移动设备的样式，再通过媒体查询逐步添加适配大屏幕的样式，这种方式可以减少冗余代码，提升小屏幕设备的加载性能。
移动优先的样式编写顺序如下：
/* 第一步：编写小屏幕默认样式 */
.box {
width: 100%;
height: 200px;
}
/* 第二步：添加中等屏幕适配样式 */
@media screen and (min-width: 768px) {
.box {
width: 50%;
}
}
/* 第三步：添加大屏幕适配样式 */
@media screen and (min-width: 1200px) {
.box {
width: 30%;
}
}
六、响应式布局注意事项
- 设置<meta>视口标签，确保移动设备正确缩放页面：<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 图片等替换元素设置
max-width: 100%，避免超出容器宽度 - 避免过度使用固定宽度，尽量使用相对单位和弹性布局
- 测试时覆盖手机、平板、桌面等不同尺寸的设备，确保适配效果符合预期