我需要动态加载横幅图像到HTML5应用程序，并希望几个不同的版本，以适应屏幕宽度。我不能正确地确定手机的屏幕宽度，所以我能想到的唯一方法是添加div的背景图像，并使用@media来确定屏幕宽度并显示正确的图像。
例如:
<span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>
这可能吗，或者有人有其他建议吗?
当前回答
嘿，我刚写完。
现在你可以使用<div style="color: red;@media (max-width: 200px) {color:绿色}">左右。
享受。
其他回答
他们没有在HTML级别上考虑媒体查询，这是疯狂的，因为很明显样式css是在HTML之后加载的，在HTML内部内联样式是一个巨大的缺点。
如果您正在使用Bootstrap Responsive Utilities或类似的替代方法，允许根据断点隐藏/显示div，则可能使用几个元素并显示最合适的元素。即。
<span class="hidden-xs" style="background: url(particular_ad.png)"></span>
<span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
问题
不，媒体查询不能以这种方式使用
<span style="@media (...) { ... }"></span>
解决方案
但是，如果您希望提供一个动态可用且响应性强的特定行为，则可以使用样式标记而不是属性。
e.i.
<style scoped>
.on-the-fly-behavior {
background-image: url('particular_ad.png');
}
@media (max-width: 300px) {
.on-the-fly-behavior {
background-image: url('particular_ad_small.png');
}
}
</style>
<span class="on-the-fly-behavior"></span>
在CodePen上查看实时工作的代码
以我的博客为例，我在<head> <link>声明后面为CSS注入了一个<style>标记，它包含了一个文本区域的内容，在我写一篇文章时，它提供了一个真正的内容textarea，用于创建额外的类。
注意:scoped属性是HTML5规范的一部分。如果你不使用它，验证器会责备你，但是浏览器目前不支持真正的目的:将<style>的内容限定在直接的父元素和该元素的子元素上。如果<style>元素在<head>标记中，Scoped不是强制性的。
更新:我建议总是在移动第一的方式使用规则，所以以前的代码应该是:
<style scoped>
/* 0 to 299 */
.on-the-fly-behavior {
background-image: url('particular_ad_small.png');
}
/* 300 to X */
@media (min-width: 300px) { /* or 301 if you want really the same as previously. */
.on-the-fly-behavior {
background-image: url('particular_ad.png');
}
}
</style>
<span class="on-the-fly-behavior"></span>
嘿，我刚写完。
现在你可以使用<div style="color: red;@media (max-width: 200px) {color:绿色}">左右。
享受。
如果你将规则添加到print.css文件中，你不必使用@media。
我在我用来给一些元素一个背景色的smarty foreach中去掉了它。
< script type = ' text / javascript ' > document.styleSheets[3]。insertRule(“# caldiv_ < ?smarty美元项目。Calendar_id ?> {border-color:<?smarty美元项目。Color ?>}"， 1); > < /脚本
