必须添加 viewport meta 标签才能启用响应式，它是整个响应式链路的起点；不加则浏览器按桌面宽度（如980px）渲染，@media 规则失效，文字模糊、点击错位；最低要求是 <meta name="viewport" content="width=device-width, initial-scale=1.0">，须置于 <head> 中，且不可禁用缩放以保障可访问性。
不加 <meta name="viewport"> 标签，其他所有响应式手段基本白搭——浏览器会按桌面宽度渲染，缩放后文字糊成一片，点击区域错位，@media 规则根本不会触发。
必须加 viewport meta 标签才能启用响应式
这是整个响应式链路的起点，不是可选项。没有它，@media (max-width: 768px) 这类规则在手机上压根不会生效，因为浏览器默认把页面当成 980px 宽来渲染，再缩放到视口里。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是最低要求，必须放在<head>内 - 不要写
user-scalable=no或maximum-scale=1.0，这会禁用双指缩放，违反 WCAG 可访问性要求 - 如果项目要兼容老版 iOS Safari（shrink-to-fit=no，但现代项目基本不用
媒体查询要用 min-width 而非 max-width（移动优先）
写 @media (max-width: 767px) 看似直观，但维护成本高、易遗漏、断点难对齐。主流框架和现代实践都采用“移动优先”：基础样式适配小屏，再用 min-width 向上增强。
- 基础 CSS 直接写，不包在媒体查询里（比如
.card { padding: 1rem; }） - 平板开始增强：
@media (min-width: 768px) { .card { padding: 1.5rem; } } - 桌面再增强：
@media (min-width: 1200px) { .card { display: flex; } } - 避免嵌套多层
@media，每个断点只覆盖需要改的属性，别重复写全量样式
Flexbox 和 Grid 比百分比更可靠
纯百分比布局看似简单，但遇到 margin/padding 百分比参照父 width、子元素脱离文档流、高度塌陷等问题时，调试耗时远超预期。Flexbox 和 Grid 是现代 CSS 布局的底层支撑。
立即学习“前端免费学习笔记（深入）”；
- 横向均分三列：
display: flex+flex: 1比width: 33.33%更稳，自动处理间隙与换行 - 响应式网格：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))能根据容器宽度自动计算列数，无需手动写断点 - 慎用
float：它已过时，clear和overflowhack 容易引发不可控的布局坍塌 - 图片容器记得加
min-width: 0防止 Flex/Grid 子项溢出（尤其含长文本或未约束图片时）
图片和字体单位必须配合布局逻辑
再好的布局，配上固定 px 字体和溢出的图片，照样在小屏上体验崩坏。响应式是整体协同，不是单点修补。
- 所有图片强制加
img { max-width: 100%; height: auto; }，否则在窄屏上必然撑破容器 - 字体推荐用
rem，根元素html { font-size: 16px; }，再配合媒体查询阶梯调整（如@media (min-width: 768px) { html { font-size: 18px; } }） - 避免直接写
font-size: 14px，也别滥用vw（比如font-size: 4vw），它在大屏上可能大得离谱，且无法被用户系统字号设置覆盖 - 图标、按钮等交互元素最小尺寸保持 ≥ 44×44px（iOS 触控热区标准），可用
min-height: 44px+padding保证
真正卡住项目的往往不是“怎么写媒体查询”，而是 viewport 缺失、图片没设 max-width、Flex 子项未设 min-width: 0、或者字体单位混用导致缩放失效——这些细节漏掉一个，整页响应式就形同虚设。
