wake-up-neo.net

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

Ich muss Bannerbilder dynamisch in eine HTML5-App laden und möchte, dass ein paar verschiedene Versionen zur Bildschirmbreite passen. Ich kann die Bildschirmbreite des Telefons nicht richtig bestimmen. Daher kann ich mir das nur vorstellen, indem ich Hintergrundbilder eines Divs hinzufüge und mit @media die Bildschirmbreite bestimme und das richtige Bild anzeige.

Zum Beispiel:

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

Ist das möglich oder hat jemand andere Vorschläge?

252
Dancer

Nein, @media Regeln und Medienabfragen können nicht in Inline-Stilattributen vorhanden sein, da sie nur property: value Deklarationen enthalten können. Wie die Spezifikation sagt es:

Der Wert des style-Attributs muss mit der Syntax des Inhalts eines CSS Deklarationsblock übereinstimmen

Die einzige Möglichkeit, Stile nur in bestimmten Medien auf ein Element anzuwenden, besteht in einer separaten Regel in Ihrem Stylesheet. Daher müssen Sie einen Selektor dafür erstellen.

So würde ein Dummy-Selektor span aussehen, aber wenn Sie auf ein ganz bestimmtes Element abzielen, benötigen Sie einen spezifischeren Selektor:

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

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

Problem

Nein, Media Queries können nicht auf diese Weise verwendet werden

<span style="@media (...) { ... }"></span>

Lösung

Wenn Sie jedoch ein bestimmtes Verhalten bereitstellen möchten, das im laufenden Betrieb verwendet werden kann UND auf das reagiert werden kann, können Sie das Markup style und nicht das Attribut verwenden.

e.i.

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

Siehe den Code, der in CodePen live arbeitet

In meinem Blog zum Beispiel füge ich ein <style>-Markup in <head> unmittelbar nach <link> Deklaration für CSS ein und es enthält den Inhalt eines Textbereichs, der neben dem eigentlichen Inhaltstextbereich zum Erstellen einer Extraklasse bereitgestellt wird on the fly als ich einen artitle schrieb.

Hinweis: Das scoped -Attribut ist Teil der HTML5-Spezifikation. Wenn Sie es nicht verwenden, gibt der Prüfer Ihnen die Schuld, aber die Browser unterstützen derzeit nicht den eigentlichen Zweck: Der Inhalt von <style> wird nur auf das unmittelbar übergeordnete Element und die untergeordneten Elemente dieses Elements angewendet. Der Gültigkeitsbereich ist nicht obligatorisch, wenn sich das Element <style> im Markup <head> befindet.


UPDATE: Ich empfehle, Regeln immer zuerst auf dem Handy zu verwenden, daher sollte der vorherige Code wie folgt lauten:

<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>
117
Bruno Lesieur

Inline-Stile dürfen derzeit nur Deklarationen (property: value Paare) enthalten.

Sie können style Elemente mit den entsprechenden media Attributen im Abschnitt head Ihres Dokuments verwenden.

13
Marat Tanalin

Ja, Sie können Medienabfragen in Inline-CSS schreiben, wenn Sie ein Bild-Tag verwenden. Für verschiedene Gerätegrößen können Sie verschiedene Bilder erhalten.

<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>
9
Arif Hussain

Wenn Sie Bootstrap Responsive Utilities oder eine ähnliche Alternative verwenden, mit der Divs abhängig von den Haltepunkten ausgeblendet/angezeigt werden können, können möglicherweise mehrere Elemente verwendet und die am besten geeigneten angezeigt werden. d.h.

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
8
Pavel

Medienabfragen in Stilattributen sind momentan nicht möglich. Aber wenn Sie dies dynamisch per Javascript einstellen müssen. Sie können 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; } }","");

Dies ist, als ob der Stil im Stylesheet vorhanden wäre. Seien Sie sich also der Besonderheit bewusst.

5
Type-Style

Ich habe versucht, dies zu testen und es schien nicht zu funktionieren, aber ich bin gespannt, warum Apple es verwendet. Ich war gerade auf https://linkmaker.iTunes.Apple.com/us/ und habe in dem generierten Code bemerkt, dass sie ein Inline-Medium verwenden, wenn Sie das Optionsfeld "Large Button" auswählen 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 ursprünglich generierte Code wird minimiert

5
davidcondrey

Du kannst image-set () benutzen

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

Hey, ich habe es gerade geschrieben.

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

Genießen.

Inline-Medienabfragen sind möglich, indem für Sass so etwas wie Haltepunkt verwendet wird

Dieser Blog-Beitrag macht einen guten Job und erklärt, wie Inline-Medienabfragen besser verwaltet werden können als separate Blöcke: Es gibt keinen Haltepunkt

Im Zusammenhang mit Inline-Medienabfragen steht die Idee der "Elementabfragen", einige interessante Lesarten sind:

  1. Gedanken zu Medienabfragen für Elemente
  2. Media Queries sind ein Hack
  3. Medienabfragen sind nicht die Antwort: Elementabfrage Polyfill
  4. falls sonst blockiert
2
Rafael Lüder

ja, Sie können mit Javascript durch die window.matchMedia

  1. desktop für rote Farbe Text

  2. tablette für grüne Farbe Text

  3. handy für blaue Farbe 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>
1
ßãlãjî

wenn Sie die Regel zur Datei print.css hinzufügen, müssen Sie @media nicht verwenden.

Ich habe es in den Smarty Foreachs, die ich verwende, um einigen Elementen eine Hintergrundfarbe zu geben, ausgeschlossen.

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