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

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

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

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

1. 关于元素媒体查询的思考
2. 媒体查询是黑客
3. 媒体查询不是答案：元素查询Polyfill
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>

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

嘿，我刚写了。

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

请享用。

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

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

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

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

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

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

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

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

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