问题根源在viewport未生效或仅用max-width:100%缩放；必须正确设置viewport标签（width=device-width,initial-scale=1.0，置于head顶部），并配合srcset+w描述符与精准sizes声明，使浏览器在HTML解析阶段就选对图片资源。
手机端图片撑破屏幕、加载慢、文字糊成一团——问题八成出在 viewport 没生效，或只靠 max-width: 100% 硬缩，没让浏览器真正“选对图”。光调 CSS 不解决带宽浪费，必须从 HTML 层面控制资源请求。
viewport 标签写错，后面全白搭
手机上图片横向滚动、字体模糊，第一反应不是查 CSS，而是看 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 是否存在且位置正确：
- 必须放在
<head>最顶部，不能动态插入、不能重复、不能写在<body>里 - 禁用
user-scalable=no或maximum-scale=1.0：前者锁死缩放，后者在 iOS Safari 中会导致双击放大失效 - 别写成
width=375或width=1200这类固定值，它必须是width=device-width - Vue/React SSR 场景下容易漏掉这行——真机加载时 DOM 已按 980px 解析完毕，补救无效
验证方式：Chrome DevTools 切手机模式 → 右键“查看网页源代码”，确认该标签紧贴 <head> 开头。
srcset + sizes 才决定手机到底加载哪张图
img { max-width: 100%; height: auto; } 只防溢出，不省流量。小屏下载 2MB 桌面图，像素全下了，只是缩着显示。真正节省带宽靠的是浏览器在 HTML 解析阶段就选对资源：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
srcset列出可用图源，用w描述符（推荐）："photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w" -
sizes是字符串，不是 CSS，必须匹配真实布局宽度："(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 常见错误：
sizes="100vw"看似安全，但如果父容器max-width: 600px，桌面端仍会加载远超所需的图 - 混用
480w和2x？浏览器直接忽略整个srcset，退化为只加载src
浏览器根据 sizes 计算出图片“将占多宽”，再从 srcset 中挑最接近且不小于该宽度的图源——这才是响应式的核心逻辑。
什么情况非用 <picture> 不可
<picture> 不是升级版 <img>，它是解决两类刚需的唯一手段：构图切换和格式强控。
- 艺术方向（Art Direction）：手机裁人脸、桌面展全景 Banner ——
<source media="(max-width: 480px)" srcset="face-crop.jpg"> - 格式降级：强制用 WebP/AVIF 并兜底 JPEG ——
<source type="image/webp" srcset="img.webp"><img src="img.jpg" alt=""> -
<source>的media断点必须和真实 CSS 布局断点一致，比如布局用768px，就别写成767px -
<picture>必须包裹<img>，且<img>必须有src和alt，否则无障碍失效、无兜底
<picture> 不负责等比缩放，缩放逻辑仍要靠外层 CSS 控制；它只回答一个问题：“这张图，在这个条件下，该换哪一张？”
Flex/Grid 容器里图片缩不进去？min-width: 0 是隐藏开关
当图片放在 display: flex 或 display: grid 的容器中，即使写了 max-width: 100%，它也可能卡住不缩小——这是 Flex 项默认 min-width: auto 在作祟。
- 给图片或其父容器加
min-width: 0，立刻解锁收缩能力 - Grid 布局中图片宽高比差异大时，统一加
aspect-ratio: 4/3，或套一层<div>并设overflow: hidden防拉伸变形 - 装饰性图片（如横幅背景）更适合用 CSS
background-image+ 媒体查询，但关键内容图绝不能这么干——语义丢失、无法被屏幕阅读器识别
真正难的不是写对某一行代码，而是让 viewport、CSS 布局宽度、sizes 表达式三者严丝合缝——差一个像素、一个括号空格（旧版 Edge 会因此整条 sizes 失效），浏览器就退回加载大图。
