我需要动态加载横幅图像到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>
其他回答
样式-属性的媒体查询现在不可能。 但如果你必须通过Javascript动态设置。 你也可以通过JS插入该规则。
document.styleSheets[0].insertRule("@media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");
这就好像样式就在样式表中一样。所以要注意特殊性。
通过使用像Breakpoint for Sass这样的东西，可以实现内联媒体查询
这篇博客文章很好地解释了内联媒体查询如何比单独的块更易于管理:There Is No Breakpoint
与内联媒体查询相关的是“元素查询”的思想，一些有趣的阅读是:
关于元素媒体查询的思考 媒体查询是一种Hack 媒体查询不是答案:元素查询填充 If else块
是的，如果你正在使用图片标签，你可以在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>
他们没有在HTML级别上考虑媒体查询，这是疯狂的，因为很明显样式css是在HTML之后加载的，在HTML内部内联样式是一个巨大的缺点。
我试着测试了一下，似乎没有效果，但我很好奇苹果为什么要用它。我刚刚在https://linkmaker.itunes.apple.com/us/上，注意到在生成的代码中，如果你选择“大按钮”单选按钮，他们正在使用内联媒体查询。
<a href="#"
target="itunes_store"
style="
display:inline-block;
overflow:hidden;
background:url(#.png) no-repeat;
width:135px;
height:40px;
@media only screen{
background-image:url(#);
}
"></a>
注:增加了换行符的可读性，原始生成的代码是最小化的
