是否可以将CSS @media规则内联？

Question

我需要将横幅图片动态加载到HTML5应用中，并且需要几个不同的版本以适合屏幕宽度。我无法正确确定手机的屏幕宽度，因此，我想到的唯一方法是添加div的背景图像，并使用@media确定屏幕宽度并显示正确的图像。

例如：

 <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>

这可能吗，或者有人有其他建议吗？

Answer 1

不可以，@media内联样式属性中不能存在规则和媒体查询，因为它们只能包含property: value声明。正如规范所说：

样式属性的值必须与CSS 声明块内容的语法匹配

仅在某些媒体中将样式应用于元素的唯一方法是在样式表中使用单独的规则，这意味着您需要为其选择一个选择器。

虚拟span选择器看起来像这样，但是如果您要定位一个非常特定的元素，则需要一个更特定的选择器：

span { background-image: url(particular_ad.png); }

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}