Accentsconagua

Schneller Tipp Ein Crash-Kurs in CSS-Medienabfragen

Code
Share

In der Vergangenheit mussten wir JavaScript verwenden, um Layouts basierend auf der Breite des Browsers des Benutzers zu erstellen - möglicherweise kombiniert mit einer serverseitigen Sprache. Glücklicherweise wird der Prozess dank CSS-Medienabfragen jetzt viel einfacher.


Abonniere unsere YouTube-Seite, um alle Video-Tutorials anzusehen!
Sehen Sie sich dieses Video lieber auf Screenr an?

Methode 1: In Ihrem Stylesheet 

 @media screen und (min-width: 1200px) / * lasst uns etwas tun * /

Methode 2: Importieren Sie aus Ihrem Stylesheet 

 @import url (small.css) Bildschirm und (min-width: 1200px);

Beachten Sie, dass Sie durch Hinzufügen eines Kommas auch zusätzliche Regeln hinzufügen können, ähnlich wie bei der Verwendung mehrerer Selektoren.

Methode 3: Link zu einem Stylesheet

Methode 4: Targeting des iPhone

Nach einigen Recherchen im Internet ist es interessant, dass trotz der Tatsache, dass das iPhone 4 eine Auflösung von 640 x 960 hat, es immer noch aufwertet mobile.css, oben im Code angegeben. Wie seltsam? Wenn Sie weitere Informationen dazu haben, hinterlassen Sie bitte einen Kommentar für den Rest von uns!

Browser, die CSS-Medienabfragen unterstützen

  • Firefox 3.5+
  • Opera 9.5+
  • Safari 3+
  • Chrom
  • Internet Explorer 9+

Bitte beachten Sie, dass Internet Explorer 8 und höher keine CSS-Medienabfragen unterstützt. In diesen Fällen sollten Sie einen JavaScript-Fallback verwenden.

Code
×