HTML5 und CSS3 Web-Entwickler können AJAX verwenden, um eine ansprechende mobile Website zu machen. Eine Möglichkeit, eine Arbeit vor Ort auch auf mehreren Auflösungen zu machen ist, verschiedene CSS-Regeln zu schaffen, basierend auf dem erfassten Medientyp.

CSS3 hat eine wunderbare neue Funktion namens der Medienabfrage, die Ihnen erlaubt, einen Medientyp angeben und verschiedene Merkmale des Displays bestimmen. Sie können diese Spezifikation verwenden, um eine Teilmenge der CSS zu bauen, die verwendet werden soll, wenn der Browser eine bestimmte Art oder Größe der Anzeige erkennt.

Geben Sie einen Medientyp

Das @Medien Regel können Sie festlegen, welche Art von Ausgabe sollte die mitgelieferte CSS ändern. Die am häufigsten verwendeten Medientypen sind Bildschirm, Druck, Sprache, Handheld, Projektion, und Fernseher. Es gibt mehr, aber nur drucken und Bildschirm sind allgemein unterstützt.

Zum Beispiel wird der folgende Code die Schriftgröße angeben, wenn der Benutzer das Dokument druckt:

@media print {body {font-size: 10pt-}}

Diese CSS kann in einem normalen CSS-Dokument eingebettet werden, aber es sollte in der Regel am Ende des Dokuments angeordnet werden, weil es Ausnahmen von den normalen Regeln hält. Sie können so viel CSS-Code platzieren, wie Sie sich in den Wunsch @Medien Element, aber Sie sollten nur CSS-Code setzen, die auf die spezifische Situation in Sie interessiert sind relevant ist.

Wie ein Qualifikationsspiel hinzufügen

Zusätzlich zu den Medientyp spezifizieren, die @Medien Regel hat eine weitere sehr mächtige Trick. Sie können eine spezielle Qualifikationsbedingung für die Medien.

Wenn der Browser breiter als 500 Pixel ist, können Sie schwarzen Text auf weißem Hintergrund zu sehen. Aber stellen Sie den Bildschirm schmaler, und Sie sehen etwas Interessantes.

Normalerweise würde man diesen Trick verwenden um das Layout zu ändern, aber mit dieser einfacheren Farbe wechselnden Beispiel beginnen. Hier ist der Code für dieses einfacheres Beispiel:

Qualifier Demo
Versuchen Sie, diese Seite Ändern der Größe. Wenn die Seite iswider als 500 Pixel, zeigt es schwarzen Text auf awhite Hintergrund.
Wenn die Seite schmaler als 500 Pixel, die colorsreverse, weißer Text auf schwarzem Hintergrund zu geben.

Hier ist, wie eine Seite zu erstellen, die auf die Bildschirmbreite anpasst:

1. Erstellen Sie Ihre Website wie gewohnt.

   Dies ist ein Ort, an dem das ganze # 147-Trennung von Inhalt von Layout # 148- Sache zahlt sich wirklich aus. Das gleiche HTML werden zwei unterschiedliche Stile haben.

2. Tragen Sie einen CSS-Stil auf die übliche Weise.

   Bauen Sie Ihren Standard-Stil in gewohnter Weise - für jetzt, den Stil auf der Seite mit dem Tag einbetten. Ihre Haupt-Stil sollte die häufigste Fall behandeln. (In der Regel ist eine Full-Size-Desktop.)

3. Bau ein @Medien Regel.

   Das @Medien CSS-Regel sollte am Ende des normalen CSS gehen.

4. Stellen Sie eine max-width: 500px Qualifier.

   Diese Qualifier zeigt an, dass die Regeln in diesem Segment wird nur dann, wenn die Breite des Bildschirms als 500 Pixel kleiner ist verwendet werden.

5. Legen Sie Sonderfall Regeln im neuen Stil.

   Alle CSS-Regeln, die Sie definieren, innerhalb der @Medien Regel wird aktiviert, wenn der Qualifier wahr ist. Verwenden Sie diese Regeln die vorhandene CSS außer Kraft zu setzen. Hinweis: Sie müssen nicht alles neu definieren. liefern nur Regeln, die Sinn in Ihrem speziellen Kontext zu machen.

6. Fügen Sie ein Ansichtsfenster.

   Handy-Browser wird manchmal versuchen, die Seite neu zu skalieren, so dass es auf einmal zu sehen ist. Diese Niederlagen der Zweck eines besonderen Stil, so verwenden Sie die Ansichtsfenster Metatag, um anzuzeigen, dass der Browser seine wahre Breite berichten. Es ist auch oft nützliche Seite-Skalierung ausschalten, weil es nicht mehr notwendig sein sollte.

In diesem Beispiel gilt der Browser immer die Haupt (schwarzer Text auf weißem Hintergrund) Stil. Dann sieht es bei der @Medien Regel zu sehen, ob der Qualifier wahr ist.

Wenn die Breite weniger als 500 Pixel, die max-width: 500px Qualifier auf true ausgewertet und alle CSS-Code in der @Medien Segment aktiviert ist. Der Browser speichert dann beide Sätze von CSS und wendet die korrekte CSS basierend auf dem Status der Regel.