Force-Medienabfrage angewendet werden

Ich habe diesen HTML und CSS-Code:Force-Medienabfrage angewendet werden

<div class="wrapper"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div> 

@media all and (max-width: 400px), (max-height: 300px) { 
    .wrapper .a { 
     .... 
     .... 
    } 
    wrapper. .b { 
     .... 
     .... 
    } 
    .... 
    .... 
}

Jetzt möchte ich, dass, wenn Wrapper die Klasse „wie-small“ bekommt, werden alle Arten von kleinen Bildschirm gelten, auch wenn die Bildschirm ist nicht klein. Ich möchte den CSS-Code in der Medienabfrage nicht duplizieren. Wie kann ich das lösen?

Eine andere Lösung besteht darin, die Medienabfrage zu erzwingen. Gibt es einen Weg, es zu tun?

Quelle

2013-03-27 Naor

Vielleicht mit [* weniger *] (http://lesscss.org). –

@JaredFarrish: Auch mit weniger, Sass oder Stylus wird das gerenderte CSS dupliziert. – Naor

Interessante Frage, ist es nur für den Debug-Zweck? – zessx

-1

Fügen Sie für diese Abschnitte dieselbe Klasse hinzu.

<div class="wrapper"> 
    <div class="makeMeShine a"></div> 
    <div class="makeMeShine b"></div> 
</div>

Wo a und b ihre eigenen Stile haben :)

Quelle

2013-03-27 09:41:58

Was ist "makeMeShine"? Wie hat das Verbindung mit der Medienabfrage? .. – Naor

makeMeShine ist nur eine Klasse, die ich hinzugefügt habe. zum Beispiel .makeMeShine {Hintergrund: rot; }. Wo immer die Klasse makeMeShine angewendet wird, haben Sie Hintergrund rot. –

Und wie verhält sich das zur Medienabfrage ??? .. – Naor

In neueren Versionen von Chrome können Sie "emulate" a mobile device, um Ihre Medien-Anfragen in einem Desktop-Browser auslösen/testen. (Internet Exploder 11 has the same behavior!) Möglicherweise müssen Sie den Browser nach dem Anwenden der Emulation aktualisieren; Chrome 35 wendet die Medienabfragen noch teilweise an, bis ich auf der zugehörigen Registerkarte auf "Aktualisieren" klicke.

Quelle

2014-07-15 14:10:27 zedd45

Sie können so etwas mit ein bisschen Javascript tun.

Kurz gesagt, verschieben Sie Ihre Medienabfragen aus dem CSS und testen sie in JS mit window.matchMedia.

Wenn Sie wissen, welches übereinstimmte, können Sie dem Tag <html> einen Klassennamen hinzufügen, ähnlich wie Modernizr funktioniert. Also auf einem Telefon würden Sie <html class="like-small"> sehen.

CSS Vorteil dieser Bequemlichkeit Klassen zu nehmen geschrieben werden, anstatt die native Medien Abfrage:

.like-small wrapper.a {} 
.like-large wrapper.a {}

(Ich mag auch .not-like-small, .not-wie- hinzufügen mittlere Klassen zu <html> auch, um die css weiter zu vereinfachen)

So jetzt, nachdem die reguläre Medienabfrage übereinstimmt und der entsprechende Klassenname an das Dokument angefügt wird, funktioniert RWD so ziemlich wie normal. Und wenn Sie einen bestimmten Stil erzwingen wollen, können Sie einfach die classNames des HTML-Tags umschreiben, um die gesamte Seite zu beeinflussen, oder einen className zu einem übergeordneten Element hinzufügen, um nur einen Teil der Seite zu beeinflussen.

Quelle

2014-10-23 14:48:23 wwwmarty

Ich weiß, dass diese Frage alt ist, aber hoffentlich ist das, was Sie gesucht haben (da es keine Antwort gab). Und ich weiß auch nicht, ob das Hinzufügen einer Spezifitätsklasse zu deinem CSS deine Anforderung, CSS nicht zu wiederholen, gebrochen hat.

Sie können erreichen, was Sie tun möchten, indem Sie die Definition Ihrer @media Abfrage ändern. Anstatt zu sagen, dass etwas passieren soll, wenn der Bildschirm kleiner als ein Wert wird, halten Sie Ihren kleinen Bildschirm CSS OUT der Medienabfrage und lassen Sie Ihre Medienabfragen für größere Bildschirme eingerichtet werden.

Dann müssen Sie nur die Reihenfolge ändern, dass Sie das CSS aufrufen und Spezifität zu den Stilen hinzufügen, wo Sie die Klasse like-small aufrufen möchten.

HTML:

<div class="wrapper like-small"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div> 


<div class="wrapper"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div>

CSS:

.wrapper.like-small .a, 
.wrapper .a { 
     height:200px; 
     width:200px; 
     background:purple; 
    } 

.wrapper.like-small .b, 
    .wrapper .b { 
     height:200px; 
     width:200px; 
     background:blue; 
} 

@media all and (min-width: 400px), (min-height: 300px) { 
    .wrapper .a { 
     height:100px; 
     width:100px; 
    background:yellow; 
    } 
    .wrapper .b { 
     height:100px; 
     width:100px; 
    background:red; 
    } 
}

Und die Geige: http://jsfiddle.net/disinfor/70n37hhj/

Hoffentlich ist das, was Sie waren nach (über ein Jahr und einen halben Tag :)

Quelle

2014-10-23 15:11:41 disinfor

Sie können mit Javascript versuchen. Dieser Satz stellt die Darstellungsbreite und zwingt den Browser Ihre Medienabfrage anwenden:

$('meta[name="viewport"]').prop('content', 'width=400');

Das aus dieser Antwort genommen wird: https://stackoverflow.com/a/20137580/1401341 Als jemand in den Kommentaren sagt, wird diese Arbeit nur mit Browsern, den viewport-Tag unterstützen.

Quelle

2016-05-17 08:35:23 Fernando

Antwort

Verwandte Themen