响应式网页设计通过CSS实现多设备适配，首先设置viewport元标签确保正确缩放；接着使用媒体查询按屏幕宽度应用不同样式，推荐移动优先策略；采用相对单位（如%、rem、vw）替代固定像素值以增强弹性；通过max-width: 100%确保图片不溢出容器；结合Flexbox和Grid布局实现动态排列，如导航栏垂直堆叠与卡片自动换行；最终构建流畅跨设备体验。
响应式网页设计（Responsive Web Design）是现代前端开发的核心技能之一。它能让网页在不同设备（如手机、平板、桌面电脑）上自动调整布局和样式，提供良好的用户体验。CSS 在实现响应式设计中起着关键作用。下面从基础概念到实际应用，详细讲解如何使用 CSS 实现响应式网页。
1. 视口设置：确保页面正确缩放
移动设备默认会缩小整个页面以适应屏幕宽度，这会导致内容过小。通过 viewport meta 标签 可以控制页面的缩放行为。
示例代码：这个标签告诉浏览器：页面宽度等于设备屏幕宽度，初始缩放比例为 1。这是响应式设计的第一步，必不可少。
2. 媒体查询：根据不同屏幕尺寸应用样式
媒体查询（Media Queries）是响应式设计的核心工具。它允许我们根据设备特性（如屏幕宽度、高度、方向等）来设定不同的 CSS 样式。
立即学习“前端免费学习笔记（深入）”；
最常用的是根据屏幕宽度进行断点划分。常见的断点有：
- 手机：最大宽度 767px
- 平板：768px ~ 1023px
- 桌面：1024px 及以上
body {
font-size: 16px;
}
@media (max-width: 767px) {
body {
font-size: 14px;
}
}
@media (min-width: 1024px) {
body {
font-size: 18px;
}
}
注意：推荐使用 移动优先 策略，即先写移动端样式，再用 min-width 向上扩展，这样更符合现代开发习惯。
3. 弹性布局：使用相对单位替代固定像素
响应式设计强调“弹性”。避免使用固定宽度（如 width: 300px），改用相对单位：
- %：相对于父元素宽度
- rem：相对于根元素（html）字体大小
- em：相对于当前元素或父元素字体大小
- vw / vh：视窗宽度/高度的 1%
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
这段代码让容器在小屏幕上占 90% 宽度，在大屏幕上最多不超过 1200px，并居中显示。
4. 弹性图片与媒体
图片在小屏幕上容易溢出容器。可以通过以下方式解决：
img, video {
max-width: 100%;
height: auto;
}
这能保证媒体内容在任何容器中都不会超出其父元素宽度，同时保持原始宽高比。
5. 使用 Flexbox 和 Grid 构建响应式布局
CSS Flexbox 和 Grid 是现代布局的强大工具，天生支持响应式。
Flexbox 示例：导航栏在小屏幕上垂直排列
.nav {
display: flex;
flex-direction: row;
gap: 1rem;
}
@media (max-width: 767px) {
.nav {
flex-direction: column;
}
}
Grid 示例：卡片布局自动换行
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
这行代码会自动根据容器宽度安排每行的卡片数量，最小每张 250px，最大占满可用空间。
基本上就这些。掌握 viewport 设置、媒体查询、相对单位、弹性图片和现代布局方式，就能构建出基本的响应式页面。实际项目中可结合框架（如 Bootstrap）加快开发，但理解底层原理更重要。不复杂但容易忽略细节，比如忘记设置 viewport 或滥用固定值，都会导致响应式失效。
