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

html CSS

LGil

2020-03-24

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

例如：

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

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

第3147篇《是否可以将CSS \`media规则内联？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共9个回答

Tony凯 2020.03.24

通过使用Breakpoint for Sass之类的工具可以进行内联媒体查询

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

与内联媒体查询有关的是“元素查询”的概念，一些有趣的读法是：

Near猪猪 2020.03.24

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

桌面为红色文本
平板电脑，用于绿色文字
移动用于蓝色文字

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

Gil 2020.03.24

您可以使用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);">

村村乐 2020.03.24

嘿，我刚写了。

现在您可以使用<div style="color: red; @media (max-width: 200px) { color: green }">左右。

请享用。

猿阿飞Tom 2020.03.24

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

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

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

蛋蛋猿 2020.03.24

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

Stafan路易 2020.03.24

我尝试对其进行测试，但它似乎没有用，但我很好奇苹果为何使用它。我只是在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>

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

猪猪 2020.03.24

如果您使用的是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>

JinJin 2020.03.24

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

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