wake-up-neo.com

CSS-Medienabfragen kombinieren

Ich möchte die gleichen CSS-Stile für Benutzer anzeigen, die die Seite drucken (media = print), und für Benutzer, die auf einem Mobiltelefon surfen. Gibt es eine Möglichkeit, CSS-Medienabfragen zu kombinieren?

Etwas wie

@media only print or @media only screen and (max-device-width: 480px) {
  #container {
    width: 480px;
  }
} 
45
Kevin Burke

Trennen Sie sie mit einem Komma:

@media only print, only screen and (max-device-width: 480px)

Siehe die Spezifikation , insbesondere Beispiel VI (Hervorhebung hinzugefügt):

In einer Medienabfrageliste können mehrere Medienabfragen zusammengefasst werden. Eine durch Kommas getrennte Liste von Medienabfragen. Wenn eine oder mehrere Medienabfragen in der durch Kommas getrennten Liste wahr sind, ist die gesamte Liste wahr und ansonsten falsch. In der Medienabfragesyntax steht das Komma für ein logisches ODER , während das Schlüsselwort ‘und’ ein logisches UND ausdrückt.

Ich bezweifle, dass das zweite only benötigt wird, so dass Sie wahrscheinlich Folgendes tun können:

@media only print, screen and (max-device-width: 480px)
62
James Allardice

Von https://developer.mozilla.org/en/CSS/Media_queries

Sie können mehrere Medienabfragen in einer durch Kommas getrennten Liste kombinieren. Wenn eine der Medienabfragen in der Liste wahr ist, wird das zugehörige Stylesheet angewendet. Dies ist das Äquivalent einer logischen "oder" Operation.

Sie müssen nur den zweiten @media Entfernen und einige Klammern hinzufügen.

3
entropid