响应式布局核心是通过viewport元标签、流体网格、弹性媒体、媒体查询、Flexbox和Grid技术组合，实现网页在不同设备上的自适应显示。
响应式布局的核心是让网页在不同设备上都能良好显示，比如手机、平板和桌面电脑。CSS 提供了多种方式来实现这一目标，不需要依赖 JavaScript，主要依靠以下几种技术组合使用。
1. 使用视口（viewport）元标签
虽然这不是 CSS 的一部分，但它是响应式设计的基础。必须在 HTML 的 <head> 中加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0">这句代码告诉浏览器按照设备宽度来渲染页面，避免移动端被默认缩放。
2. 流体网格布局（Fluid Grids）
使用相对单位代替固定像素，让元素随屏幕尺寸变化而自适应。
立即学习“前端免费学习笔记（深入）”；
常用单位：
- %：相对于父容器的宽度
- em：相对于当前字体大小
- rem：相对于根元素字体大小
- vw / vh：视窗宽度/高度的 1%
例如：
.container { width: 100%; max-width: 1200px; margin: 0 auto; }.column { width: 50%; padding: 1rem; }
3. 弹性图片与媒体
确保图片不会溢出容器：
img, video {max-width: 100%;
height: auto;
}
这样图片会根据父容器缩放，保持比例不变。
4. 媒体查询（Media Queries）
根据设备特性（如屏幕宽度）应用不同的样式。
常见断点示例：
/* 手机（小屏） */@media (max-width: 767px) {
.column { width: 100%; }
}
/ 平板（中屏） /
@media (min-width: 768px) and (max-width: 1023px) {
.column { width: 50%; }
}
/ 桌面（大屏） /
@media (min-width: 1024px) {
.column { width: 33.33%; }
}
5. Flexbox 布局
Flexbox 是现代响应式布局的主力工具，能轻松实现对齐、分布和顺序控制。
.flex-container {display: flex;
flex-wrap: wrap;
}
.flex-item {
flex: 1;
min-width: 300px;
}
当空间不足时自动换行，适合卡片布局。
6. CSS Grid 布局
Grid 更适合二维布局（行列同时控制），配合媒体查询非常强大。
.grid-container {display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
这行代码表示：每列至少 250px，自动填充，多余空间平均分配。
7. 移动优先设计（Mobile-First）
先写移动端样式，再通过 min-width 逐步增强大屏体验。
/* 默认样式（手机） */.card { width: 100%; }
/ 平板以上 /
@media (min-width: 768px) {
.card { width: 50%; }
}
/ 桌面以上 /
@media (min-width: 1024px) {
.card { width: 25%; }
}
基本上就这些。掌握 viewport、流体单位、媒体查询、Flexbox 和 Grid，就能应对大多数响应式需求。关键是结构要灵活，样式要分层适配。不复杂但容易忽略细节。
