的media属性控制图片源选择，必须写在内、按从宽到窄顺序排列，且语法完整；未匹配则回退至，后者必须存在并含src和alt。
media 查询本身不加载图片，它只控制样式；真正决定加载哪张图的是 <picture></picture> 中的 media 属性或 img 的 sizes + srcset。混淆这两者，是图片“该换没换”或“换了但显示错位”的主因。
为什么写了 @media 但图片还是不切换
常见现象：桌面尺寸下仍显示移动版图片，或图片容器尺寸没变，导致裁剪异常。
-
<source media="(min-width: 800px)"></source>是 HTML 层级的条件判断，由浏览器在加载阶段解析，和 CSS@media完全无关 - 如果用了
@media去改<img alt="HTML如何利用媒体查询微调不同设备上的响应式图片" >的width或display，但没同步调整其父容器（比如<picture></picture>或包裹div）的布局行为，图片可能被截断、错位或撑开容器 - 深层嵌套的 CSS 选择器（如
article.card-body picture.image-container）会覆盖媒体查询中设置的display: block或max-width，让样式“看似写了却无效”
用 <picture></picture> + media 属性做精准设备适配
这是最可控的“艺术方向”（Art Direction）方案，适合不同断点需不同裁剪、宽高比或格式的场景。
-
<source></source>必须写在<img alt="HTML如何利用媒体查询微调不同设备上的响应式图片" >之前，否则浏览器直接忽略 -
media属性值必须是完整媒体查询表达式，例如(min-width: 768px)，不能简写为768px - 多个
<source></source>按顺序匹配，第一个满足条件的即生效；未匹配则 fallback 到<img alt="HTML如何利用媒体查询微调不同设备上的响应式图片" > - 示例中桌面图宽高比为 616×432（≈1.43），移动图为 346×243（≈1.42），视觉上几乎一致，但若你实际需要横幅图（16:9）+ 移动竖构图（4:5），就得分别提供对应裁剪版本
用 srcset + sizes 实现分辨率/尺寸自适应
适合同一构图、只需缩放的场景，比如内容区头图、产品图等。浏览器根据视口宽度和 sizes 计算出图片“将要占用的宽度”，再从 srcset 中选最接近且不小于该值的源。
立即学习“前端免费学习笔记（深入）”；
-
sizes不是固定值，而是媒体条件列表：sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw" - 如果省略
sizes，浏览器默认按100vw计算，可能导致小屏加载大图 -
srcset中的w描述符必须与图片真实宽度一致，否则浏览器无法准确估算 —— 用工具生成时务必校验输出尺寸 - 不要同时设
width: 100%和max-width: 100%，后者已足够；加height: auto是防止拉伸的必要保障
对齐与容器控制必须配合媒体查询重置
图片居中失效、左右对齐错乱，90% 源于只调 img 样式，忽略其容器在不同断点下的行为一致性。
- 给
<img alt="HTML如何利用媒体查询微调不同设备上的响应式图片" >加margin: 0 auto前，必须确保它是display: block；更稳妥是包一层<div class="img-container">，统一控制 <code>text-align或justify-content - 用
flex布局时，@media应作用于容器，而非图片本身：.img-container { display: flex; justify-content: center; } @media (min-width: 769px) { .img-container { justify-content: flex-start; } } - 如果容器有
padding或overflow: hidden，会影响图片可见区域，调试时优先看 Computed 面板中的box-sizing和overflow - 绝对定位（
position: absolute）会让图片脱离文档流，此时媒体查询对齐规则基本失效，应避免
真正难的不是写对某一条 @media，而是理解 <picture></picture> 的加载逻辑、srcset 的匹配机制、以及 CSS 样式层如何与 HTML 结构协同——三者稍有错位，图片就既没换对，也没摆正。
