html - 是否可以将 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 at-rules 和媒体查询不能存在于内联样式属性中，因为它们只能包含 property: value声明。如the spec说:

The value of the style attribute must match the syntax of the contents of a CSS declaration block

仅在某些媒体中将样式应用于特定元素的唯一方法是在样式表中使用单独的规则(无论是外部链接还是内部链接在 <style> 元素中)，这意味着您需要提出它的选择器。可以抢一个using your browser's dev tools , 或找出隔离此元素的类和/或 ID 组合:

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

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

如果由于页面的性质而无法找到能够单独可靠匹配此元素的选择器，则可以使用自定义属性，前提是您无需担心具体性 or Internet Explorer :

:root { --particular-ad: url(particular_ad.png); }

@media (max-width: 300px) {
    :root { --particular-ad: url(particular_ad_small.png); }
}

<span style="background-image: var(--particular-ad);"></span>