Was bedeutet diese Zeile CSS zu bedeuten??? @media only screen and (min-device-width: 320px) and (max-device-width: 480px)

Fand ich die folgende Zeile von code in WordPress' Twenty Eleven-theme-stylesheet.

Was bedeutet es?

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
  • Werfen Sie einen Blick auf diese website: responsivedesign.ca/resources
  • möglich, Duplikat der Was ist der Unterschied zwischen max-device-width und max-width für das mobile Internet?
  • Google ist dein bester Freund. Anschliessend kommen Sie zu uns...
  • Ich habe gerade gegoogelt, diese, und diese Frage war das top-Ergebnis. Oft finde ich SO schneller Zugriff auf das, was ich wissen müssen, als der original-Dokumentation. Ich denke, es ist ein high-level-Ziel, die Frage, was SO ist-aber so weit ich bin besorgt, Fragen wie diese sind sehr nützlich.
  • Cephron richtig ist. Dies ist eigentlich eine nützliche Frage. Ich Suche immer in Google und suchen Sie dann nach Stack Overflow Antworten. Das ist genau das, was in diesem Fall die akzeptierte Antwort genau die info, die ich brauchte. Ist das nicht der Punkt, der SO zu Fragen und Fragen zu beantworten???
InformationsquelleAutor user2322509 | 2013-05-06
  1. 13

    Es heißt CSS3 Media Queries das ist ein Technik zu helfen, Ihre website anpassen, um verschiedene Abmessungen oder grundsätzlich hilft es, zu liefern unterschiedliche Formate auf unterschiedlichen Geräten.

    Da du neu bist, lasst uns brechen Ihre Medien-Abfrage, um zwei Teile:

    @media only screen

    Dies bedeutet, dass wir anwenden, css-Stile, um ein Gerät mit einem Bildschirm. Das Schlüsselwort only hier verwendet, um hide-Stylesheets von älteren Browsern sehen Telefon Stylesheet.

    and (min-device-width: 320px) and (max-device-width: 480px)

    Dies ist naheliegend, da es bedeutet, dass die angegebene css - nur angewendet, wenn ein Gerät hat eine Bildschirm Größe mit mindestens 320px und maximal 480px in der Breite Maß.

    • Ja, aber was dann? Schreibe ich meine css-Klassen nach dieser Zeile ein, oder was?
    • @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { // CSS-Stile hier, dass Sie nur angewendet werden soll, die oben z.B. h1 { font-size: 3.0 em; } }
    InformationsquelleAutor Eli
  2. 0

    Lasst uns verstehen, die Bedeutung der code-Schritt für Schritt:

    Du code war: 

    @media only screen and (min-device-width: 320px) and (max-device-width: 480px)

    Den @media - Regel definieren, die verschiedenen style-Regeln für verschiedene Medientypen/- Geräte.

    Den nur - Schlüsselwort verhindert, dass ältere Browser, die nicht unterstützen media queries mit media-Funktionen aus der Anwendung der bestimmten Stilen. Es hat keine Wirkung auf den modernen Browsern.

    Begrenzen Sie die Formatvorlagen für Geräte mit einer Bildschirm und deren min-und max-width bekannt ist, können Sie die Kette der media-Funktionen der Bildschirm-Medien Typ:

    screen and (min-device-width: 320px) and (max-device-width: 480px)

    Zur weiteren Orientierung können Sie überprüfen, MDN-website, indem Sie hier klicken

    InformationsquelleAutor AKNair
Schreibe einen Kommentar