CSS 响应式设计入门
从入门一路学到这里，选择器、CSS 伪类、CSS 属性关键字，基础部分已经全部过了一遍。从今天开始进入进阶部分，回答一个新问题。怎么让一套代码在手机、平板、电脑上都好看。这个思路就叫响应式设计。
响应式设计解决什么问题
十年前的网页基本只服务电脑屏幕，宽度大约 1024 像素。现在访客手里的设备五花八门，手机、平板、折叠屏，还有横竖屏切换。如果为每种设备单独做一个页面，工作量翻倍不说，内容更新还容易漏。响应式设计的核心理念就一句话，一套代码，适配所有屏幕。
实现它主要靠三大支柱：
- 流式布局，容器宽度用相对单位，而不是写死像素值
- 弹性图片，图片随容器大小自动缩放，不溢出
- 媒体查询，针对不同屏幕宽度应用不同样式
其中媒体查询内容最多，下一篇专门讲它。今天先把前两支柱搞明白，顺带解决一个最容易忽略的问题，视口。
别忘了视口设置
先做一个实验，新建一个普通 HTML 页面，用手机浏览器打开。你会发现文字小得可怜，整个页面像被缩小后塞进屏幕。原因是手机浏览器默认假设页面是为 960 像素宽的屏幕设计的，于是先按 960 像素渲染，再整体缩小。
解决办法是在 head 里加一行 meta 标签：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>这行的意思是，把视口宽度设为设备宽度，初始缩放比例为 1。加上之后，手机浏览器才会用真实的屏幕宽度来排版，后面学的媒体查询才有意义。
相对单位是流式布局的基础
固定像素单位 px 的问题在于它是死的。容器写 960px，屏幕只有 375px 时它就会溢出。相对单位则是活的，各自相对某个基准计算。常见的有五种。
| 名称 | 作用 | 注意事项 |
|---|---|---|
% |
相对父元素的宽度或高度 | 高度百分比依赖父元素有明确高度，否则不生效 |
em |
相对当前元素的字号 | 会层层累积，嵌套多了字号容易失控 |
rem |
相对根元素 html 的字号 | 只认根节点，适合做全局字号体系 |
vw |
视口宽度的 1% | 100vw 就是全屏宽，注意它包含滚动条宽度 |
vh |
视口高度的 1% | 移动端地址栏收起时 100vh 会跳动 |
实际使用建议是，全局字号和间距用 rem，方便统一调整。全屏区域比如首屏大图、弹窗背景，用 vw 和 vh。局部细节用 % 和 em 就够了。
弹性图片
图片是页面里最容易撑破布局的元素。一张 800 像素宽的图片，放进 375 像素的手机屏幕，直接就溢出了。给图片加上两行属性就好：
img {
max-width: 100%;
height: auto;
}max-width 100% 的意思是图片最大不能超过容器宽度，比容器小时保持原样，比容器大时就缩到和容器一样宽。height auto 让高度跟着宽度等比变化，防止图片被压扁或拉长。给所有 img 加上这两行，是响应式页面的标配操作。
综合小例子
把上面的东西串起来，做一个简单的个人卡片页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的卡片</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="card">
<img src="avatar.png" alt="头像">
<h1>小明的学习笔记</h1>
<p>记录前端学习路上的每一个知识点，从 HTML 到 CSS，从布局到动画。</p>
</section>
</body>
</html>html {
font-size: 16px;
}
body {
margin: 0;
padding: 2rem;
background: #f5f5f5;
}
.card {
max-width: 640px; /* 内容太宽时保持适中 */
margin: 0 auto; /* 居中 */
padding: 2rem;
background: #fff;
border-radius: 12px;
}
.card img {
max-width: 100%; /* 图片不溢出 */
height: auto;
border-radius: 8px;
}
.card h1 {
font-size: 1.5rem; /* rem 字号，全局可调 */
}这个页面在手机上，卡片占满屏幕宽度，图片自动缩小。在电脑上，卡片最多 640px 居中显示，两侧留白。同一份代码，两种体验。
小结
响应式设计不是神秘技术，核心就是三个习惯。加 viewport 标签，用相对单位做布局，给图片设 max-width。把这三个习惯养成，再配合下一篇的媒体查询，一套代码走天下的目标就能实现。