Est-il possible de mettre les CSS @media règles inline?

Non, @media les règles et les requêtes de média ne peut pas exister dans les attributs de style en ligne, car ils ne peuvent contenir que des property: value déclarations. Comme le spec il met:

La valeur de l'attribut style doit correspondre à la syntaxe du contenu d'un CSS le bloc de déclaration

La seule façon d'appliquer des styles à un élément seulement dans certains médias est avec une règle distincte dans votre feuille de style, ce qui signifie que vous aurez besoin de venir avec un sélecteur pour elle.

Un mannequin span sélecteur ressemblerait à ceci, mais si vous êtes un ciblage très précis de l'élément que vous aurez besoin d'un plus spécifiques sélecteur:

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

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

Styles en ligne actuellement, ne peuvent pas contenir autre chose que des déclarations (property: value paires).

Vous pouvez utiliser style éléments appropriés media attributs dans head section de votre document.

Oui, vous pouvez écrire des requêtes de média en ligne-css si vous utilisez une image de la balise. Pour les différentes tailles d'instrument, vous pouvez obtenir des images différentes.

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

Requêtes de média dans le style-les Attributs ne sont pas possible en ce moment.
Mais si vous deviez définir cette dynamique via Javascript.
Vous pouvez insérer la règle via JS aswell.

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

C'est comme si le style était là, dans la feuille de style. Donc, être conscient de la spécificité.

Vous pouvez utiliser l'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);">

oui,vous pouvez le faire avec javascript par le fenêtre.matchMedia

1. de bureau pour le rouge la couleur du texte

2. tablette pour le texte de couleur verte

3. mobile pour le bleu la couleur de texte

JS:

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

HTML:

    <div id="daynight">tricky style for mobile,desktop and tablet</div>