我需要动态加载横幅图像到HTML5应用程序，并希望几个不同的版本，以适应屏幕宽度。我不能正确地确定手机的屏幕宽度，所以我能想到的唯一方法是添加div的背景图像，并使用@media来确定屏幕宽度并显示正确的图像。
例如:
<span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>
这可能吗，或者有人有其他建议吗?
当前回答
是的，你可以通过window.matchMedia使用javascript
桌面为红色文本 绿色文字的平板电脑 移动为蓝色文本
//isat_style_media_query_for_desktop_mobile_tablets var tablets = window.matchMedia("(max-width: 768px)");//for tablet devices var mobiles = window.matchMedia("(max-width: 480px)");//for mobile devices var desktops = window.matchMedia("(min-width: 992px)");//for desktop devices isat_find_device_tablets(tablets);//apply style for tablets isat_find_device_mobile(mobiles);//apply style for mobiles isat_find_device_desktops(desktops);//apply style for desktops // isat_find_device_desktops(desktops,tablets,mobiles);// Call listener function at run time tablets.addListener(isat_find_device_tablets);//listen untill detect tablet screen size desktops.addListener(isat_find_device_desktops);//listen untill detect desktop screen size mobiles.addListener(isat_find_device_mobile);//listen untill detect mobile devices // desktops.addListener(isat_find_device_desktops); // Attach listener function on state changes function isat_find_device_mobile(mob) { // isat mobile style here var daynight=document.getElementById("daynight"); daynight.style.color="blue"; // isat mobile style here } function isat_find_device_desktops(des) { // isat mobile style here var daynight=document.getElementById("daynight"); daynight.style.color="red"; // isat mobile style here } function isat_find_device_tablets(tab) { // isat mobile style here var daynight=document.getElementById("daynight"); daynight.style.color="green"; // isat mobile style here } //isat_style_media_query_for_desktop_mobile_tablets <div id="daynight">tricky style for mobile,desktop and tablet</div>
其他回答
是的，如果你正在使用图片标签，你可以在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; } }","");
这就好像样式就在样式表中一样。所以要注意特殊性。
我试着测试了一下，似乎没有效果，但我很好奇苹果为什么要用它。我刚刚在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>
注:增加了换行符的可读性，原始生成的代码是最小化的
问题
不，媒体查询不能以这种方式使用
<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>
他们没有在HTML级别上考虑媒体查询，这是疯狂的，因为很明显样式css是在HTML之后加载的，在HTML内部内联样式是一个巨大的缺点。
