viewport标签是移动端渲染开关，必须置于head最前且仅一次；核心参数为width=device-width和initial-scale=1；布局用flex/grid+rem/clamp；图片必设max-width:100%并配合srcset；媒体查询应min-width优先、内容驱动断点。
没加 <meta name="viewport">，其他所有响应式手段都白搭——它不是可选项，是移动端渲染的开关。
viewport 标签必须写对位置和参数
这个标签必须放在 <head> 最开头，且只出现一次。浏览器一解析到它就立即生效，晚了可能首屏已按默认 980px 渲染完毕，再改会触发重排或缩放抖动。
-
width=device-width是核心：不写它，iOS Safari 和安卓 WebView 都 fallback 到桌面视口，文字小得看不清 -
initial-scale=1必须显式带上：某些老 iOS 版本只写width=device-width仍会忽略缩放逻辑 - 禁用
user-scalable=no或maximum-scale=1：违反 WCAG 可访问性要求，视力障碍用户无法放大，iOS 折叠屏下还可能错判媒体查询 - 别写
width=375这类固定值——设备一换就横向滚动或留白
最低可用配置就是：<meta name="viewport" content="width=device-width, initial-scale=1">
布局别硬写 px，优先用 flex/grid + 相对单位
固定像素宽度（如 width: 1200px）在小屏上必然溢出；但 px 并非敌人，关键看用在哪——边框、阴影这类“锚点型”样式用 px 更稳，而容器宽、内边距、字体大小该随视口变化。
立即学习“前端免费学习笔记（深入）”；
- 外层容器用
max-width: 1200px; margin: 0 auto，而非width: 1200px - 子元素布局优先用
display: flex或display: grid，避免float或inline-block - Flex 容器记得加
flex-wrap: wrap，否则子项死扛不换行，撑破父容器 - 字体大小用
rem或clamp(14px, 4vw, 18px)，别直接写font-size: 16px
图片不设 max-width: 100% 就会撑破布局
只靠 HTML 的 <img src> 不足以应对多设备，CSS 层面必须兜底。否则高分辨率图在窄屏上直接横向滚动，用户第一眼就流失。
- 基础防护：
img { max-width: 100%; height: auto; }——解决“不溢出”，但不解决“加载浪费” - 真正响应式图片需配合
srcset和sizes，例如：<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"> - 背景图用
background-size: cover或contain，别依赖width/height固定拉伸
媒体查询要用 min-width 且从内容出发定断点
移动端优先不是口号，是代码组织逻辑。从窄屏写起，用 @media (min-width: 768px) 往上叠加，比用 max-width 更少覆盖冲突、更易维护。
- 断点别照搬 768/1024 —— 拖动浏览器宽度，看“哪里开始挤”，比如导航栏换行、文字折行、卡片间距过紧的位置才是真实阈值
- 用
em写断点（如@media (min-width: 48em)）比px更兼容用户系统字体缩放设置 - 每个断点只覆盖需要变的属性，别重复写整套规则；尤其注意重置 display、flex-direction 等容易残留的样式
- 慎用
@media (hover: hover)做渐进增强，部分触屏设备也报告 hover 支持，导致误触发
最常被忽略的是：viewport 写对了，但图片没设 max-width、容器用了固定 px 宽、媒体查询里忘了重置某个 display 值——这些配套点一漏，页面照样错乱。
