什么是自适应
自适应（Adaptive）指网页能够根据浏览器窗口大小、设备屏幕尺寸自动调整布局与元素大小，让内容在不同设备上都清晰可读、易于操作。它不是某个单一 CSS 属性，而是一整套做法的组合：相对单位、流式布局、媒体查询、弹性图片。
在没有自适应的年代，网页按固定宽度（如 960px）设计：宽屏显示器两侧留着大片空白，手机上则要左右拖动才能看清。自适应的思路是“内容像水一样倒进不同容器”：宽度用百分比、字号用 rem、图片按比例缩放，再配合媒体查询在不同宽度下切换布局。
- 自适应解决的是“同一套代码，多种屏幕”的问题
- 核心三件套：相对单位 + 流式布局 + 媒体查询
- 移动设备早已超过桌面设备成为主要访问终端，自适应从加分项变成了必选项
HTML
<!-- 一个最小可复制的自适应骨架：宽度限幅 + 居中 + 媒体查询 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <!-- 自适应的起点：声明视口，否则手机会按 980px 宽度缩放页面 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自适应示例</title> <style> body { margin: 0; font-family: "Microsoft YaHei", sans-serif; } /* 容器：宽度随视口变化，但不会无限拉宽 */ .wrap { width: min(92%, 960px); margin: 0 auto; } /* 卡片用百分比宽度，窄屏自动变窄 */ .card { box-sizing: border-box; width: 48%; padding: 16px; border: 1px solid #ddd; border-radius: 8px; } /* 窄屏时卡片改为整行 */ @media (max-width: 600px) { .card { width: 100%; } } </style> </head> <body> <div class="wrap"> <h1>自适应页面</h1> <div class="card">卡片 A：在桌面占一半宽度。</div> <div class="card">卡片 B：在手机上占满整行。</div> </div> </body> </html>
本节要点自适应 = 相对单位 + 流式布局 + 媒体查询；手机页面必须写 viewport meta，否则字小到无法阅读。
