本文介绍如何仅使用 html 和内联 css（不依赖外部样式表），通过媒体查询动态切换 banner 图片——小屏显示小图，大屏（≥768px）自动替换为高清大图。
在纯 HTML 环境中实现响应式图片切换，关键在于结合 。虽然 标签本身不支持直接在 HTML 属性中写媒体查询，但我们可以将
以下是完整、可直接运行的示例代码：
@@##@@
✅ 重要说明与注意事项：
- content: url(...) 可用于
元素，但属于「CSS 替换内容」机制，会完全覆盖 src 属性（即小屏用 src，大屏用 content）。 - 为提升选择器特异性与可靠性，建议为
添加唯一 alt、id 或 class，并据此在媒体查询中精准定位（如上例使用 img[alt="Responsive Banner"]）。
- !important 可增强覆盖力，避免内联 src 的隐式优先级干扰（部分浏览器中 src 的权重较高）。
- 此方案无需 JavaScript，零外部文件，完全符合内联要求，适用于邮件模板、静态单页、CMS 富文本编辑器等受限环境。
⚠️ 兼容性提示：
IE 完全不支持 content 作用于 ；若需兼容 IE，应改用
总结：借助内联
立即学习“前端免费学习笔记（深入）”；
