Ist es möglich, CSS @media Regeln inline zu setzen?

Question

Ich muss dynamisch Banner-Bilder in eine HTML5-App laden und möchte ein paar verschiedene Versionen, um die Bildschirm-Breiten anzupassen. Ich kann die Bildschirmbreite des Telefons nicht korrekt bestimmen, also ist der einzige Weg, den ich mir vorstellen kann, dies zu tun, Hintergrundbilder eines Divs hinzuzufügen und @media zu verwenden, um die Bildschirmbreite zu bestimmen und das richtige Bild anzuzeigen.

Zum Beispiel:

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

Ist dies möglich, oder hat jemand einen anderen Vorschlag?

Answer 1

Hey, ich habe es gerade geschrieben.

Jetzt können Sie <div style="color: red; @media (max-width: 200px) { color: green }"> oder so.

Viel Spaß!

Answer 2

Media Queries in style-Attributen sind zur Zeit nicht möglich. Aber wenn Sie diese dynamisch über Javascript setzen müssen. Sie könnten diese Regel auch über JS einfügen.

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

Das ist so, als ob der Stil im Stylesheet vorhanden wäre. Achten Sie also auf die Spezifität.

Answer 3

Ich habe versucht, dies zu testen, und es schien nicht zu funktionieren, aber ich bin neugierig, warum Apple es verwendet. Ich war gerade auf https://linkmaker.itunes.apple.com/us/ und bemerkte in der generierten Code bietet es, wenn Sie die "Large Button"-Radio-Button auswählen, sind sie mit einem Inline-Media-Abfrage.

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

Hinweis: Zeilenumbrüche zur besseren Lesbarkeit hinzugefügt, der generierte Originalcode wurde minimiert

Answer 4

Ja, das kann man mit Javascript durch die window.matchMedia

1. Desktop für roten Text

2. Tablette für Text in grüner Farbe

3. mobil für blauen Text

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

Answer 5

Sie können image-set() verwenden

<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);">