it-swarm.com.de

Verwendung von Symbolen> oder <(größer als und kleiner als) in Medienabfragen

Können wir die Symbole ">" oder "<" (Größer als und Kleiner als) in Medienabfragen verwenden? Zum Beispiel möchte ich einen Tauchgang für alle Monitore mit weniger als 768px verbergen. kann ich so etwas sagen:

@media screen and (min-width<=768px) {}
15
user1986096

Medienabfragen verwenden diese Symbole nicht. Stattdessen verwenden sie die Präfixe min- und max-. Dies wird in spec behandelt:

  • Die meisten Medienfunktionen akzeptieren optionale Präfixe "min" oder "max", um "größer oder gleich" und "kleiner oder gleich" als Einschränkungen auszudrücken. Diese Syntax wird verwendet, um "<" und ">" Zeichen zu vermeiden, die zu Konflikten mit HTML und XML führen können. Die Medienfunktionen, die Präfixe akzeptieren, werden am häufigsten mit Präfixen verwendet, können jedoch auch alleine verwendet werden.

Anstelle von (width <= 768px) würde man also stattdessen (max-width: 768px) sagen:

@media screen and (max-width: 768px) {}
32
BoltClock
@media screen and (max-width: 768px) { ... }
4
Zack Burt

Schauen Sie sich die Sass-Bibliothek include-media an, die (obwohl für Sass) erklärt, wie Aufrufe wie @include media('<=768px') einfachen CSS @media-Abfragen zugeordnet werden. Siehe insbesondere diesen Abschnitt der Dokumentation.

TLDR, was Sie von dort lernen, ist:

Um etwas wie media('<=768px') (kleiner oder gleich 768) in CSS zu tun, müssen Sie schreiben

@media (max-width: 768px) {}

und um das Äquivalent von media('<768px') (weniger als 768) in CSS zu tun, müssen Sie schreiben

@media (max-width: 767px) {}

Beachten Sie, wie ich 1 von 768 subtrahiert habe, sodass die maximale Breite weniger als 768 beträgt (weil wir das Verhalten < less-than emulieren wollten, das in CSS eigentlich nicht vorhanden ist).

Um also etwas wie media('>768px', '<=1024') in CSS zu emulieren, schreiben wir:

@media (min-width: 769px) and (max-width: 1024px) {}

und media('>=768px', '<1024') wäre

@media (min-width: 768px) and (max-width: 1023px) {}
1
trusktr