是否有可能将CSS @media规则内联？
我需要dynamic加载横幅图像到HTML5应用程序，并希望有几个不同的版本，以适应屏幕宽度。 我无法正确确定手机的屏幕宽度，所以我唯一能想到的方法是添加div的背景图像，并使用@media来确定屏幕宽度并显示正确的图像。
例如：
<span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span> 这是可能的，还是有没有人有任何其他的build议？
不，@media规则和媒体查询不能@media联样式属性中存在，因为它们只能包含property: value声明。 正如规范所说：
style属性的值必须与CSS 声明块内容的语法匹配
将样式应用于元素的唯一方法是在样式表中使用单独的规则，这意味着您需要为其提供一个select器。
一个虚拟的spanselect器看起来像这样，但是如果你的目标是一个非常特定的元素，你将需要一个更具体的select器：
span { background-image: url(particular_ad.png); } @media (max-width: 300px) { span { background-image: url(particular_ad_small.png); } }
问题
不，媒体查询不能以这种方式使用
<span style="@media (...) { ... }"></span>
解
但是如果你想提供一个可用的特定行为和响应，你可以使用style标记而不是属性。
EI
<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>后面的<head>注入了一个<style>标记，它包含了一个在实际内容textarea旁边提供的textarea的内容，用于在写入时创build额外的类一个artitle。
注意： scoped属性是HTML5规范的一部分。 如果你不使用它，validation器会责备你，但是浏览器目前不支持真正的目的：只在立即的父元素和该元素的子元素上限定<style>的内容。 如果<style>元素在<head>标记中，那么作用域不是必需的。
更新：我build议总是在移动的第一种方式使用规则，所以以前的代码应该是：
<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>
内联样式当前不能包含声明以外的任何内容（ property: value对）。
您可以在文档head使用具有适当media属性的style元素。
如果您正在使用Bootstrap响应式实用程序或类似的替代方法，允许根据断点隐藏/显示div，则可以使用多个元素并显示最合适的值。 即
<span class="hidden-xs" style="background: url(particular_ad.png)"></span> <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
在样式属性中的媒体查询现在是不可能的。 但是，如果你必须通过Javascriptdynamic设置。 您可以通过JS插入该规则。
document.styleSheets[0].insertRule("@media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");
这就好像风格在样式表中那样。 所以要注意特殊性。
我试图testing这个，它似乎没有工作，但我很好奇，为什么苹果使用它。 我只是在https://linkmaker.itunes.apple.com/us/，并注意到它提供的生成代码，如果您select“大button”单选button，他们正在使用内联媒体查询。;
<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>
注意：为了便于阅读，增加了换行符，原始生成的代码被缩小
内联媒体查询可以通过使用诸如Breakpoint for Sass之类的东西来实现
这篇博文很好地解释了内联媒体查询如何比单独的块更易于pipe理： 没有断点
与内联媒体查询相关的是“元素查询”的概念，有一些有趣的内容是：
- 关于元素媒体查询的思考
- 媒体查询是一个黑客
- 媒体查询不是答案：元素查询填充
- 如果别的块
嘿，我只是写了。
现在你可以使用<div style="color: red; @media (max-width: 200px) { color: green }">左右。
请享用。
你可以使用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);">
如果将规则添加到print.css文件中，则不必使用@media。
我用我聪明的习惯来给它们一些背景颜色。
<script type='text/javascript'> document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1); </script>
