我需要动态加载横幅图像到HTML5应用程序，并希望几个不同的版本，以适应屏幕宽度。我不能正确地确定手机的屏幕宽度，所以我能想到的唯一方法是添加div的背景图像，并使用@media来确定屏幕宽度并显示正确的图像。
例如:
<span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>
这可能吗，或者有人有其他建议吗?
当前回答
是的，如果你正在使用图片标签，你可以在inline-css中编写媒体查询。对于不同的设备大小，您可以得到不同的图像。
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
其他回答
嘿，我刚写完。
现在你可以使用<div style="color: red;@media (max-width: 200px) {color:绿色}">左右。
享受。
通过使用像Breakpoint for Sass这样的东西，可以实现内联媒体查询
这篇博客文章很好地解释了内联媒体查询如何比单独的块更易于管理:There Is No Breakpoint
与内联媒体查询相关的是“元素查询”的思想，一些有趣的阅读是:
关于元素媒体查询的思考 媒体查询是一种Hack 媒体查询不是答案:元素查询填充 If else块
@media at-rules和media查询不能存在于内联样式属性中，因为它们只能包含property: value声明。正如规范所言:
style属性的值必须与CSS声明块的内容的语法匹配
仅在特定媒体中将样式应用到特定元素的唯一方法是在样式表中使用单独的规则(无论是外部链接还是在<style>元素中内部链接)，这意味着您需要为它提供一个选择器。你可以使用浏览器的开发工具获取一个，或者找出一个类和/或ID组合来隔离这个元素:
#myelement { background-image: url(particular_ad.png); }
@media (max-width: 300px) {
#myelement { background-image: url(particular_ad_small.png); }
}
如果由于页面的性质，你无法找到一个选择器来可靠地匹配这个元素，你可以使用一个自定义属性，前提是你不需要担心特异性或Internet Explorer:
:root { --particular-ad: url(particular_ad.png); }
@media (max-width: 300px) {
:root { --particular-ad: url(particular_ad_small.png); }
}
<span style="background-image: var(--particular-ad);"></span>
他们没有在HTML级别上考虑媒体查询，这是疯狂的，因为很明显样式css是在HTML之后加载的，在HTML内部内联样式是一个巨大的缺点。
内联样式目前只能包含声明(属性:值对)。
您可以在文档的头部部分使用带有适当媒体属性的样式元素。
