理解响应式设计的核心理念与三大支柱
掌握 <meta name="viewport"> 的作用与正确写法
能够实现响应式图片、响应式文本和响应式布局
熟练使用 CSS 媒体查询（Media Queries） 设置断点
正确应用 Flexbox、CSS Grid 和 多列布局 构建现代响应式页面
响应式网页设计（RWD） 是一种让网页在任何设备（手机、平板、笔记本、台式机）上都能自动适配屏幕尺寸、提供最佳浏览体验的设计方法。
核心原则
流体网格：使用百分比或 fr 单位代替固定像素
弹性图片：图片随容器缩放，不溢出
媒体查询：根据屏幕宽度应用不同样式
目标：无需横向滚动、无需缩放、内容清晰可读、交互便捷
作用：告诉移动浏览器“不要缩放页面”，而是将 CSS 像素与设备像素对齐。
正确写法（必须放在 <head> 中）
<meta name="viewport" content="width=device-width, initial-scale=1.0">使用
max-width: 100%（推荐）
img {
max-width: 100%;
height: auto; /* 保持宽高比 */
}优点：图片不会超过其容器宽度，且不会被拉伸变形
使用
<picture>元素（高级用法）
为不同屏幕提供不同分辨率或裁剪的图片，提升性能与体验：
<picture>
<source media="(min-width: 1024px)" srcset="desktop.jpg">
<source media="(min-width: 768px)" srcset="tablet.jpg">
<img src="mobile.jpg" alt="描述">
</picture>适用场景：英雄图（Hero Image）、产品展示图等关键视觉元素
避免使用固定 px 字体大小，改用相对单位：
示例：标题随屏幕缩放
h1 {
font-size: clamp(1.5rem, 4vw, 3rem); /* 最小1.5rem，理想4vw，最大3rem */
}
clamp()函数：现代最佳实践，确保文本在合理范围内缩放
根据设备特性（主要是宽度）应用不同样式。
基本语法
@media screen and (max-width: 768px) {
/* 平板及以下设备的样式 */
}
@media screen and (min-width: 1024px) {
/* 桌面设备的样式 */
}常用断点（推荐使用）
移动优先策略：先写手机样式，再用
min-width逐步增强
一维布局
适合单行 / 单列的灵活排列（如导航栏、卡片组）。
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
gap: 16px;
}
.item {
flex: 1 1 200px; /* 最小200px，可伸缩 */
}优势：自动分配空间，支持对齐、排序、反向等
二维布局
适合复杂网格（如仪表盘、相册、杂志排版）。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}auto-fit：自动填充列数
minmax(250px, 1fr)：每列最小 250px，剩余空间均分
响应式魔法：一行代码实现“在大屏显示 4 列，小屏显示 1 列”
适合长文本分栏（如新闻、博客正文）。
.article {
column-count: 3;
column-gap: 2em;
column-rule: 1px solid #ccc;
}注意：不适合交互元素（如按钮、表单），因内容会跨列流动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式示例</title>
<style>
/* 重置与基础样式 */
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6; }
/* 响应式图片 */
img {
max-width: 100%;
height: auto;
}
/* 容器 */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 标题响应式 */
h1 {
font-size: clamp(1.8rem, 5vw, 3rem);
color: #2e8b57;
text-align: center;
}
/* Grid 布局 */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-top: 30px;
}
.card {
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* 移动端优化 */
@media (max-width: 600px) {
.container {
padding: 10px;
}
h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>响应式网页设计示例</h1>
<div class="card-grid">
<div class="card">
<h2>📱 手机</h2>
<p>单列布局，大字体，触控友好</p>
</div>
<div class="card">
<h2>💻 桌面</h2>
<p>多列布局，充分利用屏幕空间</p>
</div>
<div class="card">
<h2>🔄 自适应</h2>
<p>无需刷新，实时响应窗口变化</p>
</div>
</div>
</div>
</body>
</html>