width=device-width是响应式布局的起点，因为缺失该viewport标签时浏览器按980px桌面视口渲染，导致媒体查询失效、文字模糊、点击错位；它强制对齐布局视口与视觉视口，使css基于真实设备宽度计算。
为什么 width=device-width 是响应式布局的起点，而不是可选项
没有这行 <meta name="viewport" content="width=device-width, initial-scale=1.0">，所有后续的 CSS 媒体查询、rem 计算、vw 单位都会在移动端失效——浏览器会按桌面视口（通常约 980px）渲染页面，然后整体缩放进小屏幕，导致文字模糊、点击区域错位、媒体查询断点完全失准。
常见错误现象：
- 在 Chrome DevTools 模拟 iPhone 时，
@media (max-width: 768px)根本不触发 - 明明写了
font-size: 1.2rem，但手机上字体小得看不清 - 图片撑破容器，出现横向滚动条
关键原因：移动端浏览器默认使用“虚拟视口”（layout viewport），它和视觉看到的“视觉视口”（visual viewport）分离。这行 meta 的作用是把两者对齐，让 CSS 基于真实设备宽度计算。
不要加 user-scalable=no ——它违反 WCAG 2.1 可访问性标准，且现代 iOS/Android 系统已限制该属性的实际效果。
图片加载性能卡在哪？<picture></picture> + srcset 不是万能解药
仅靠 srcset 切换不同分辨率图片，无法解决「大屏设备下载小图」或「小屏设备被迫加载高清图」的问题。真正起效的是结合 sizes 属性与媒体条件，让浏览器根据容器宽度而非设备像素比做决策。
实操建议：
- 用
<picture></picture>包裹多个<source></source>，明确指定media和srcset，例如：<source media="(min-width: 768px)" srcset="hero-large.jpg 2x, hero-large@2x.jpg 2x"></source> -
sizes必须写具体值，比如sizes="(max-width: 768px) 100vw, 50vw"，告诉浏览器：在小屏下这张图占满视口，在桌面下只占一半 - 避免在
<img>上同时写width和height固定尺寸——它会破坏流式布局，且可能引发 CLS（累积布局偏移） - 优先用
loading="lazy"，但首屏关键图要删掉这个属性，否则可能白屏
媒体查询断点不是猜的，max-width 和 min-width 混用会出什么问题
断点混乱最常出现在多层嵌套组件中：父容器用 @media (max-width: 768px)，子组件又用 @media (min-width: 768px)，结果在 768px 这个临界值上样式互相覆盖，调试时发现样式“有时生效有时不生效”。
根本原因：CSS 层叠顺序 + 浏览器对浮点像素的四舍五入处理（如 768.3px 在某些设备上报为 768px）。
更稳妥的做法：
- 统一用
min-width，从移动到桌面递增定义，例如：@media (min-width: 320px)→@media (min-width: 768px)→@media (min-width: 1024px) - 断点值避开常见设备硬边界（如 768px 是 iPad 竖屏，但很多安卓平板是 800px），改用内容驱动：当文字开始换行、卡片排列拥挤时再切
- 用
clamp(1rem, 4vw, 1.5rem)替代部分媒体查询，减少 CSS 规则数量
Flexbox/Grid 的 flex-basis 和 grid-template-columns 怎么影响首屏渲染
过度依赖 flex: 1 或 1fr 容易造成布局抖动：浏览器先按初始内容宽度渲染，再重排为弹性尺寸，尤其在字体加载完成前后，文字高度突变，导致按钮跳动、图片错位。
性能敏感场景应：
- 给
flex-basis设定合理初始值，例如flex: 0 1 300px，而非flex: 1 - Grid 中避免全用
1fr，搭配固定值或minmax()，例如：grid-template-columns: minmax(300px, 1fr) 2fr - 用
aspect-ratio控制图片/视频容器宽高比，替代 JS 计算或 padding-top hack，减少重绘 - 慎用
display: contents——它会让父元素失去盒模型，影响可访问性（屏幕阅读器可能跳过整个结构）
最常被忽略的一点：所有这些弹性单位和媒体查询，都依赖于 HTML 文档流是否干净。如果 <div> 里混着未闭合标签、内联 <code>style 覆盖了关键响应规则，或者 JS 动态插入的 class 与媒体查询冲突，再好的 CSS 也救不回来。
