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

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

例如：

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

---

这是可能的，还是有人有任何其他建议？

@media

at规则和媒体查询不能存在于内联样式属性中，因为它们只能包含

属性：值

声明。正如它所说：

style属性的值必须与CSS内容的语法匹配

在某些媒体中，将样式应用于一个特定元素的唯一方法是在样式表中使用单独的规则（无论是在

元素的外部链接还是内部链接），这意味着您需要为它设置一个选择器。您可以抓取一个，或者找出隔离此元素的类和/或ID组合：

#myelement{背景图像：url（特别是_ad.png）；}
@介质（最大宽度：300px）{
#myelement{background image:url（特别是_ad_small.png）；}
}

如果由于页面的性质，无法找到与此元素单独可靠匹配的选择器，则可以使用自定义属性，前提是不必担心特殊性：

：root{--special-ad:url（special_-ad.png）；}
@介质（最大宽度：300px）{
：root{--special ad:url（special_ad_small.png）；}
}

---

内联样式当前只能包含声明（

属性：值

对）

---

您可以在文档的

head

部分使用

style

元素和适当的

media

属性。

。我刚刚打开并注意到，在它提供的生成代码中，如果选择“大按钮”单选按钮，则它们使用的是内联媒体查询

<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>

---

注意：为了可读性增加了换行符，原始生成的代码被缩小了

内联媒体查询可以使用类似于for Sass的东西

这篇博文很好地解释了内联媒体查询如何比单独的块更易于管理：

与内联媒体查询相关的是“元素查询”的概念，以下是一些有趣的内容：

如果您正在使用或类似的替代方案，允许根据断点隐藏/显示div，则可以使用多个元素并显示最合适的div。i、 e

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>

---

问题

否，不能以这种方式使用媒体查询

<span style="@media (...) { ... }"></span>

例如，在我的博客中，我在

声明之后的

中插入了一个

标记，它包含了一个textarea的内容，这个textarea是在真实内容textarea旁边提供的，用于在我写一篇文章时动态创建额外的类

注意：

scoped

属性是HTML5规范的一部分。如果您不使用它，验证器会责怪您，但浏览器目前不支持真正的用途：只在直接父元素和该元素的子元素上定义

的内容。如果

元素位于

标记中，则作用域不是必需的

---

更新：我建议始终以移动优先的方式使用规则，因此前面的代码应该是：

<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>

/*0至299*/
.即时行为{
背景图片：url（'special_ad_small.png'）；
}
/*300比X*/
@介质（最小宽度：300px）{/*或301，如果您希望与之前的相同*/
.飞行中的行为{
背景图片：url（'special_ad.png'）；
}
}

现在无法在样式属性中查询媒体。 但是如果您必须通过Javascript动态地设置它。 您也可以通过JS插入该规则

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

---

这就好像样式在样式表中一样。因此，请注意特殊性。

如果将规则添加到print.css文件，则不必使用@media

我在smarty foreach中解开了它，我用它给一些元素添加了背景色

样式表[3].insertRule（“#caldiv{border color:}”，1）；

现在您可以使用

左右

享受。

您可以使用image-set（）

---

是的，如果您使用图片标签，您可以在内联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。matchMedia

红色文本桌面

绿色文本的平板电脑

蓝色文本手机

//isat\u风格\u媒体\u查询\u桌面\u移动\u平板电脑
var tablets=window.matchMedia（（最大宽度：768px））//用于平板电脑设备
var mobiles=window.matchMedia（（最大宽度：480px））//用于移动设备
var desktops=window.matchMedia（“（最小宽度：992px）”）//用于桌面设备
isat_find_设备_片剂（片剂）//适用于平板电脑
isat_find_device_mobile（手机）//为手机应用样式
isat_查找设备_台式机（台式机）//为桌面应用样式
//isat_查找_设备_台式机（台式机、平板电脑、手机）；//在运行时调用侦听器函数
tables.addListener（isat\u find\u device\u tables）//听，直到检测平板电脑屏幕大小
addListener（isat\u find\u device\u desktops）//监听直到检测桌面屏幕大小
mobiles.addListener（isat\u find\u device\u mobile）//监听直到检测到移动设备
//addListener（isat\u find\u device\u desktops）；
//在状态更改时附加侦听器函数
功能是搜索设备移动设备（mob）
{
//这里是移动风格
var daynight=document.getElementById（“daynight”）；
daynight.style.color=“蓝色”；
//伊萨特莫
<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);">

<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>