必须添加viewport元标签和HTML5语义结构：<meta name="viewport" content="width=device-width, initial-scale=1.0">，配合<header>、<nav>、<main>、<footer>等标签，否则响应式无法启动。
直接上手做响应式首页，viewport 元标签漏掉就全白搭——它不加，手机浏览器默认按 980px 宽度渲染，媒体查询根本不会触发。
必须写的 viewport 标签和基础 HTML 结构
这不是可选项，是启动响应式的第一道闸门。写在 <head> 里，且只能写一次：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
其中 width=device-width 让页面宽度匹配设备物理像素宽度；initial-scale=1.0 防止 iOS Safari 自动缩放。漏掉任意一部分，小屏下文字会挤成一团、按钮点不中、导航栏错位——这些不是 CSS 问题，是底层渲染没对齐。
结构上优先用 HTML5 语义标签，比一堆 <div class="header"> 更可靠：
立即学习“前端免费学习笔记（深入）”；
-
<header>放 logo 和主导航 -
<nav>套在<ul><li><a>外层，明确语义 -
<main>包主体内容，避免用<div id="content"> -
<footer>放版权和次要链接，别塞进<div>
导航栏在小屏下收不起来？检查 Flex + 媒体查询断点
新手常把导航写成横向一排 <li>，但没设换行或折叠逻辑。正确做法是：先用 Flex 布局让导航在桌面端横排，再用媒体查询在小屏下堆叠或隐藏。
关键点：
- 给
<nav>或包裹<ul>的容器加display: flex，子项<li>默认横向排列 - 小屏断点建议从
max-width: 767px开始（避开 iPad 竖屏的 768px 边界） - 在断点内把
<nav>设为display: none，再单独写一个汉堡按钮<button>触发显示——别试图靠 CSS 把<ul>挤成单列，它会撑破容器 - 如果用
flex-wrap: wrap强行换行，注意<li>宽度不能写死px，得用%或flex-basis
图片撑破容器？max-width: 100% 必须全局加
新手贴图后发现移动端图片溢出屏幕，第一反应是调 width，但这是治标不治本。真正要做的，是在 CSS 里统一重置：
img { max-width: 100%; height: auto; }
这条规则必须写在最外层样式表开头，否则局部覆盖容易失效。它确保所有 <img> 不会宽过父容器，且等比缩放。如果用了 <picture> 或 srcset，也要保证每个 <source> 对应的图片本身尺寸合理——别拿 4000px 宽的原图塞进 srcset，浏览器选图逻辑会失灵。
额外提醒：
- 背景图用
background-size: contain或cover，别依赖width/height控制 - 图标类小图建议用 SVG，天生矢量、无缩放失真
- 懒加载
loading="lazy"可加，但别指望它解决溢出问题
布局塌陷、元素错位？先关掉 float，用 flex 或 grid
还在用 float: left 做两栏布局？那基本等于主动放弃响应式。浮动元素脱离文档流，clear 清除不干净就会导致后续内容上移、高度塌陷，尤其在小屏换行时完全不可控。
替代方案很直接：
- 单行多列（如导航、卡片列表）：父容器
display: flex，子项flex: 1或flex-basis: 300px - 多行网格（如博客文章格子、作品集）：父容器
display: grid，配grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) - 兼容性要求高（IE11）：用
display: inline-block+vertical-align: top，但要处理换行空格
最后强调一点：所有容器宽度尽量避免写死 px，改用 max-width: 1200px + margin: 0 auto，既保大屏居中，又让小屏自动收缩。真正难的从来不是代码怎么写，而是哪些地方**不能写死**——比如字体大小别全用 px，留个 rem 接口；边距别全用 px，留个 em 缓冲。这些细节不显眼，但决定页面在不同设备上是“勉强能看”，还是“自然舒展”。
