有可能把CSS @媒体规则内联吗?

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

例如:

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

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

598460 次浏览
小开
最佳答案

@media at-rules和media查询不能存在于内联样式属性中，因为它们只能包含property: value声明。正如规范所说:

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

在特定媒体中对特定元素应用样式的唯一方法是在样式表中使用单独的规则(无论是外部链接还是在<style>元素中内部链接)，这意味着你需要为它提供一个选择器。你可以获取一个使用浏览器的开发工具，或者找出一个隔离该元素的类和/或ID组合:

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


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

如果由于页面的性质而无法找到单独可靠地匹配此元素的选择器，则可以使用自定义属性，只要您不需要担心特殊性或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>
小开

内联样式目前不能包含声明以外的任何内容(property: value对)。

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

小开

我试着测试了一下，似乎没有效果，但我很好奇苹果为什么要用它。我刚刚在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>

注:增加了换行符的可读性，原始生成的代码是最小化的

小开

使用Sass的断点之类的东西可以实现内联媒体查询

这篇博客文章很好地解释了内联媒体查询如何比单独的块更易于管理:没有断点

与内联媒体查询相关的是“元素查询”的思想，一些有趣的阅读是:

  1. 关于元素的媒体查询的思考
  2. 媒体查询是一个黑客
  3. 媒体查询不是答案:元素查询Polyfill
  4. if else blocks
小开

如果你正在使用引导响应实用程序或类似的替代方法，允许根据断点隐藏/显示div，则可以使用几个元素并显示最合适的元素。即。

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

解决方案

但如果你想要提供一个特定的行为可用的动态和响应，你可以使用style标记，而不是属性。

e。

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

< a href = " http://codepen。io/Haeresis/pen/KwooLd" rel="noreferrer">在CodePen上实时工作的代码

以我的博客为例，我在<head>中注入了一个<style>标记，就在CSS的<link>声明之后，它包含了一个文本区域的内容，在我写一篇文章时，它提供了一个真实内容文本区域的内容，用于在运行中创建额外的类。

注意:scoped属性是HTML5规范的一部分。如果你不使用它，验证器会责备你，但浏览器目前不支持真正的目的:将<style>的内容限定在直接父元素和该元素的子元素上。如果<style>元素在<head>标记中，Scoped不是强制性的。

更新:我建议总是在移动第一的方式使用规则，所以以前的代码应该是:

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

媒体查询样式属性现在是不可能的。 但如果你必须通过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中去掉了它。

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

小开

< a href = " http://codepen。 . io/Grawl/pen/LbbEEW" rel="noreferrer">嘿，我刚刚写了它

现在你可以使用<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);">
小开

是的，如果你正在使用图片标签，你可以在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>
小开

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

  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>

小开

是的，这是很可能的，但只有在HTML元素中使用javascript事件属性。在这里你必须记住，不是每个html标签元素都可以触发每个js事件，它可以侦听DOM的更改，例如onresize或执行js代码，当DOM加载时，如onload事件。在上面的例子中，我使用了身体和img标记，因为它们只能触发img事件，主体标记为onload和onresize。根据事件的不同，您可以选择解决问题的方法，如使用示例中的代码。

使用身体标记:

<body onload="
const mediaQueryList = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
console.log('This is a wide screen — more than 600px wide.');
document.body.style.backgroundColor = 'aquamarine';
}
}
mediaQueryList.addEventListener('change', screenTest);
" onresize="
if (document.documentElement.offsetWidth <= 600) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
console.log('This is a wide screen — more than 600px wide.');
document.body.style.backgroundColor = 'aquamarine';
}
"><!-- Some other code goes here --></body>

使用img标记:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=="
width="100%" style="width: 100vw; height: 1px;"
alt="" height="1"
onload="
const mediaQueryList = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
console.log('This is a wide screen — more than 600px wide.');
document.body.style.backgroundColor = 'aquamarine';
}
}
mediaQueryList.addEventListener('change', screenTest);
" />

您还应该记住，如果您决定使用这种在HTML信件中嵌入mediaquery css的方式，它可能不会通过邮件服务器的黑名单，这在大多数情况下会减少此类javascript事件。但对于一些ajax或横幅，一些动态应用程序，这种方法应该没有问题。

小开

他们没有在HTML级别上考虑媒体查询，这是疯狂的，因为很明显样式css是在HTML之后加载的，在HTML内部内联样式是一个巨大的缺点。


提交答案