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

293

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

例如：

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

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

html  css  media-queries 
— 舞蹈家
source
3
对答案感到失望？看到这个评论。这可能会有所帮助。
— rinogo '18

Answers:

284

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

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

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

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

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

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}
— BoltClock
source
70
您也可以只<style>在HTML中添加标签。对于background-image从数据库动态提取的情况，这是一种必要的方法。显然，在外部样式表中不适合这样做。
— 杰克·威尔逊
1
@Jakobud：是的，样式表的位置无关紧要，但要点是，您只能在CSS中执行此操作，而不是内联样式属性。
— BoltClock
3
请注意将来的浏览<script>器，转发电子邮件时，电子邮件客户端通常会剥离该标签，因此人们倾向于使用嵌入式样式的电子邮件。这意味着没有媒体查询。我目前正在寻找针对这种情况的最佳做法，但请注意。
— TCannadySF '16
3
请在中设置最大宽度em，而不是中px。这样，当您缩放时，它仍然会合理地工作。
— 西拉斯·布朗
2
@Silas S. Brown：那不是我的问题。我只是在反映问题中使用的内容。
— BoltClock
137

问题

否，无法以这种方式使用媒体查询 

<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上实时查看工作代码

在我的博客例如，我注入<style>的标记<head>刚过<link> CSS声明，它包含文本区域的内容，该文本区域的内容是在实际内容文本区域的旁边提供的，以便在我编写标题时即时创建额外的类。

注意：该scoped属性是HTML5规范的一部分。如果您不使用它，验证器将责备您，但浏览器当前不支持其真正目的：<style>仅将内容的范围限定在直接父元素和该子元素上。如果<style>元素在<head>标记中，则作用域不是必需的。

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

<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>
— 布鲁诺·莱瑟尔
source
10
这是比接受的答案更好的答案，因为它允许您动态更改background-image页面加载的时间。
— 杰克·威尔逊
7
虽然范围原则上看起来不错，但Chrome取消了对早期支持的几个版本，现在只有Firefox有任何支持。
— Anthony McLin 2015年
1
Scoped仅用于不允许.on-the-fly-behavior使用，但是如果某个导航器使用“ ignore”一词则不是问题。<style>可以在所有导航器的<body>中使用，可以正常工作。这只是一个w3c验证要求。
— Bruno Lesieur，2015年
4
尽管这scoped是一个出色的解决方案，但任何浏览器均未正式支持它。希望很快会改变。
— 肯·夏普
1
这是另一个问题，因为电子邮件的主要目标是通过客户端的电子邮件，许多客户电子邮件进行阅读不支持嵌入<style>，或者media queries或所有的HTML / CSS功能。因此，实际上问题比这更大。我只知道您能够在所有具有HTML4和CSS2功能（带有某些Outlook hack）的客户端电子邮件（包括Gmail）上以相同的方式创建显示的电子邮件，但是在这种情况下没有媒体查询。
— Bruno Lesieur
15

内联样式当前不能包含除声明（property: value对）之外的任何内容。

您可以在文档的部分中使用style具有适当media属性的元素head。

— 马拉·塔纳林
source
13

是的，如果您使用图片标签，则可以在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>
— 阿里夫·侯赛因
source
这不适用于CSS背景图片：url（）
— Jonas Eberle
10

如果您使用的是Bootstrap Responsive Utilities或类似的替代方法，可以根据断点隐藏/显示div，则可以使用多个元素并显示最合适的元素。即

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
— 帕维尔
source
3
美丽的解决方法-隐藏div，基于媒体查询显示div-我看到的唯一缺点是它仍将同时加载两个图像，因此您将两者都发送到客户端。
— 迈克尔·盖茨
4
重复的内容对于维护或SEO来说不是一件好事。
— Bruno Lesieur
1
不幸的是，这是一个虚假的朋友！我也考虑过这种解决方案，但是我们希望较小的图片可以服务于小型设备并节省字节以供下载。这种技术的作用恰恰相反
— A. D'Alfonso
8

目前无法在style-Attributes中进行媒体查询。但是，如果您必须通过Javascript动态设置它。您也可以通过JS插入该规则。

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

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

— 文字样式
source
什么时候有可能的想法？
— SuperUberDuper
1
我认为不会。但是我不知道工作组正在做的所有事情。
— Type-Style
7

我尝试对其进行测试，但它似乎没有用，但我很好奇苹果为什么要使用它。我只是在https://linkmaker.itunes.apple.com/us/上，并且在生成的代码中注意到，如果您选择“大按钮”单选按钮，则它们将使用嵌入式媒体查询。

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

注意：增加了换行符以提高可读性，并减少了原始生成的代码

— 大卫·康德雷
source
3
我想知道苹果为何/如何也使用它
— Douglas.Sesar 2014年
1
给定链接上的引用代码不再存在（至少对我来说；也许由于不在美国，我得到的内容有所不同）。此外，这似乎更像是一个独立的问题，是一个答案。
— Mark Amery 2015年
1
我提交了一个错误报告，并且我相信他们已经删除了它。itunesaffiliate.phgsupport.com/hc/en-us/requests/14201
— davidcondrey15年
4

您可以使用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);">
— 七人行
source
2
请注意，目前仅基于Webkit的浏览器支持此功能。
— Qqwy
这不是基于大小（如问题所述），而是基于缩放因子，因此您可能会在27英寸2560x1440屏幕上获得小屏幕的图片。那可能就是您想要的-也许不是。
— JanBühler'17
4

是的，您可以通过window.matchMedia使用javascript

  1. 桌面为红色文本

  2. 平板电脑的绿色文字

  3. 移动用于蓝色文字

//isat_style_media_query_for_desktop_mobile_tablets
var tablets = window.matchMedia("(max-width:  768px)");//for tablet devices
var mobiles = window.matchMedia("(max-width: 480px)");//for mobile devices
var desktops = window.matchMedia("(min-width: 992px)");//for desktop devices



isat_find_device_tablets(tablets);//apply style for tablets
isat_find_device_mobile(mobiles);//apply style for mobiles
isat_find_device_desktops(desktops);//apply style for desktops
// isat_find_device_desktops(desktops,tablets,mobiles);// Call listener function at run time
tablets.addListener(isat_find_device_tablets);//listen untill detect tablet screen size
desktops.addListener(isat_find_device_desktops);//listen untill detect desktop screen size
mobiles.addListener(isat_find_device_mobile);//listen untill detect mobile devices
// desktops.addListener(isat_find_device_desktops);

 // Attach listener function on state changes

function isat_find_device_mobile(mob)
{
  
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="blue";

// isat mobile style here

}

function isat_find_device_desktops(des)
{

// isat mobile style here

var daynight=document.getElementById("daynight");
daynight.style.color="red";
 
//  isat mobile style here
}

function isat_find_device_tablets(tab)
{

// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="green";

//  isat mobile style here
}


//isat_style_media_query_for_desktop_mobile_tablets
    <div id="daynight">tricky style for mobile,desktop and tablet</div>
展开摘要

— ßãlãjî
source
1

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

我在为某些元素提供背景色的聪明技巧中未使用它。

<script type='text/javascript'>
  document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>
展开摘要

— 保罗·沃尔伯斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.