纯CSS媒体查询可实现响应式图片，但需配合正确HTML结构与关键CSS属性：img设max-width:100%和height:auto，用background-image配合媒体查询切换构图，断点应基于内容溢出点而非设备尺寸，并注意viewport声明、现代格式及可访问性。
纯 CSS 媒体查询能实现响应式图片，但必须配合正确的 HTML 结构和关键 CSS 属性，否则图片会拉伸、错位或不加载——src 本身不响应，靠的是 width、height、max-width 和 background-image 的断点切换。
用 <img> 实现流体缩放而非固定尺寸
直接写 <img src="photo.jpg" width="800" height="600"> 会锁死尺寸，破坏响应性。正确做法是移除内联宽高，用 CSS 控制：
-
img必须设max-width: 100%，否则在小屏上溢出容器 -
height: auto是关键，否则等比缩放失效，图片被压扁或拉长 - 避免只设
width: 100%而不设height: auto，否则部分浏览器（如旧版 Safari）仍会保持原始高度 - 若父容器有 padding 或 border，需提前加
box-sizing: border-box防止宽度超限
用 background-image 切换不同构图的图片
当桌面端要展示竖构图、移动端要窄长图时，<img> 标签无法原生切换源文件，得用 CSS 背景图 + 媒体查询：
- HTML 中只写一个语义容器：
<div class="hero-banner"></div> - CSS 中用
@media (min-width: 768px)设置background-image: url("hero-desktop.webp") - 再用
@media (max-width: 767px)覆盖为background-image: url("hero-mobile.webp") - 必须配
background-size: cover或contain，否则图片可能留白或裁剪失控 - 注意：CSS 背景图不会出现在打印样式中，且无
alt文本，纯装饰图才适合此方案
媒体查询断点不能只靠设备类型猜
写 @media (max-width: 600px) 并不等于“手机”，实际效果取决于 viewport 设置和容器上下文：
立即学习“前端免费学习笔记（深入）”；
- 必须在
<head>中声明：<meta name="viewport" content="width=device-width, initial-scale=1">，否则媒体查询在 iOS Safari 中基本失效 - 断点数值应基于设计稿内容溢出点，而非“iPhone 12 宽度”——比如卡片文字换行异常发生在 480px，那就用
480px，不是硬套 375px - 多个断点叠加时，优先级按 CSS 顺序执行，后写的规则会覆盖前面同名属性，别指望“min-width > max-width”自动互斥
- 用
prefers-reduced-motion或prefers-color-scheme等现代媒体特性做辅助适配，但别当主力断点
图片加载性能常被忽略的三个细节
响应式不只关乎显示，更影响首屏加载速度：
- HTML 中用
<picture>+<source media>可让浏览器选择最匹配的资源，但需配srcset和sizes，否则 fallback<img>仍会加载 - CSS 背景图无法通过
loading="lazy"延迟加载，只能靠 Intersection Observer 手动控制，或改用<img>+opacity过渡 - 所有图片都该用现代格式（
.webp或.avif），并在服务器配置Accept头协商，否则媒体查询切了图，却还是在传 2MB 的 JPG
真正难的不是写出媒体查询，而是判断哪张图该在哪个断点出现、是否需要保留语义、能否接受无 JS 降级——这些决定直接影响可访问性和长期维护成本。
