本文介绍如何不依赖外部css文件，仅通过html内联样式和`
在纯HTML环境中实现响应式图片切换，关键在于结合内联样式与嵌入式媒体查询——虽然HTML本身不支持媒体查询，但可在<style>标签中定义CSS规则，并利用@media响应视口变化。需注意：直接在<img>标签的style属性中无法写媒体查询，因此必须将媒体查询逻辑放入<style>块中。
以下是一个完整、可直接运行的示例：
<div style="text-align: center; margin: 0 auto;">
<img src="small-banner.jpg" alt="响应式横幅图"
style="max-width: 100%; height: auto; display: block;">
<style>
@media (min-width: 768px) {
img[alt="响应式横幅图"] {
content: url("large-banner.jpg");
/* 注意：content 属性会替换 img 的 src 内容，但仅在部分浏览器中可靠 */
}
}
</style>
</div>⚠️ 重要注意事项：
- content: url(...) 虽然在Chrome、Edge等现代浏览器中支持用于替换<img>内容，但在Firefox中不生效（Firefox不支持对<img>元素使用content），且该用法不符合HTML语义规范，存在兼容性风险；
- 更健壮、推荐的做法是使用两个<img>标签配合display: none/block控制显隐（仍属纯HTML+内联CSS方案）：
<div style="text-align: center;">
<!-- 小屏图片（默认显示） -->
<img src="small-banner.jpg" alt="Mobile Banner"
style="max-width: 100%; height: auto; display: block;">
<!-- 大屏图片（默认隐藏） -->
<img src="large-banner.jpg" alt="Desktop Banner"
style="max-width: 100%; height: auto; display: none;">
<style>
@media (min-width: 768px) {
img[alt="Mobile Banner"] { display: none; }
img[alt="Desktop Banner"] { display: block; }
}
</style>
</div>✅ 该方案兼容所有主流浏览器，语义清晰，无需JavaScript或外部文件，完全满足“仅用HTML和内联CSS”的需求。最后提醒：务必为图片添加alt属性以保障可访问性，并确保图片路径正确。
立即学习“前端免费学习笔记（深入）”；
