网页自适应需视口设置、流式结构、断点响应和现代布局四层协同；缺一即致小屏错乱，首要必须加<meta name="viewport">标签并设content="width=device-width, initial-scale=1.0"。
网页自适应不是靠某个“开关”或单一技巧，而是由视口设置、流式结构、断点响应和现代布局四层共同作用的结果；缺任何一层，小屏上都可能出现横向滚动条、文字溢出或布局错乱。
必须加 <meta name="viewport">，否则所有 CSS 响应都白搭
这是最常被跳过的一步。没有它，移动端浏览器会以桌面宽度（通常是 980px）渲染页面，然后缩放显示，导致字体发虚、点击区域错位、@media 查询完全失效。
-
content="width=device-width, initial-scale=1.0"是底线，不能省略 - 如果项目需禁用用户缩放（如后台系统），可加
user-scalable=no，但对普通网站不推荐 - 不要写成
width=1024或其他固定值——这会让 iPhone SE 等小屏设备强行拉伸内容
用 max-width: 100% 处理图片和嵌入内容，别只靠 width: 100%
width: 100% 只让元素填满父容器，但如果图片原始尺寸远大于容器（比如 2000px 宽的 banner 图），它仍会撑破布局。真正起效的是组合使用：
-
img { max-width: 100%; height: auto; }—— 强制等比缩放，不溢出 -
iframe, video, object { max-width: 100%; height: auto; }—— 同样适用 - 如果父容器用了
flex或grid，子项默认有min-width: auto，会导致图片拒绝收缩；此时必须显式加min-width: 0
断点别硬套 768px/1024px，优先按内容而非设备决定
媒体查询的断点不是标准答案，而是“内容开始挤不下的临界点”。同一张卡片列表，在字体放大后可能 640px 就需要换行，而不是死守 768px。
立即学习“前端免费学习笔记（深入）”；
- 先写移动端样式（无
@media），再向上增强：@media (min-width: 620px)、@media (min-width: 840px)更贴近真实内容流 - 避免嵌套多层
@media，容易漏掉中间状态；一个断点只改必要属性（如flex-direction、grid-template-columns） - 用
rem或em写断点值，可随根字体缩放，比像素更鲁棒
Flexbox 和 Grid 不是互斥选项，而是分工明确
选哪个不看“新不新”，而看布局维度和兼容要求：
- 一维排列（导航栏、表单项、卡片横排）→ 用
display: flex，flex-wrap: wrap自动折行 - 二维网格（仪表盘、相册、复杂表单）→ 用
display: grid，grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))实现列数自适应 - 要兼容 IE10+？用 Flex；只支持 Chrome/Firefox/Safari 11+？Grid 更干净
- 千万别在
display: flex容器里给子项设float—— Flex 会忽略 float，且破坏文档流
最容易被忽略的其实是“内容本身是否适配”：长英文单词不换行、中文段落没设置 word-break: break-word、表单控件在 iOS 上无视 width: 100%……这些都会让再完美的布局框架失效。
