我需要动态加载横幅图像到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:绿色}">左右。

享受。

其他回答

您可以使用image-set()

<div style="
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);">

嘿,我刚写完。

现在你可以使用<div style="color: red;@media (max-width: 200px) {color:绿色}">左右。

享受。

是的,如果你正在使用图片标签,你可以在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>

如果你将规则添加到print.css文件中,你不必使用@media。

我在我用来给一些元素一个背景色的smarty foreach中去掉了它。

< script type = ' text / javascript ' > document.styleSheets[3]。insertRule(“# caldiv_ < ?smarty美元项目。Calendar_id ?> {border-color:<?smarty美元项目。Color ?>}", 1); > < /脚本

样式-属性的媒体查询现在不可能。 但如果你必须通过Javascript动态设置。 你也可以通过JS插入该规则。

document.styleSheets[0].insertRule("@media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");

这就好像样式就在样式表中一样。所以要注意特殊性。