Wie man eine Responsive Mobile Site in AJAX für HTML5 und CSS3 erstellt Programmierung - Dummies

HTML5- und CSS3-Webentwickler können AJAX verwenden, um eine responsive mobile Website zu erstellen. Eine Möglichkeit, eine Website bei mehreren Auflösungen gut zu nutzen, besteht darin, basierend auf dem erkannten Medientyp unterschiedliche CSS-Regeln bereitzustellen.

CSS3 verfügt über eine wunderbare neue Funktion namens Medienabfrage , mit der Sie einen Medientyp angeben und verschiedene Funktionen der Anzeige festlegen können. Sie können diese Spezifikation verwenden, um eine Teilmenge des CSS zu erstellen, die verwendet werden soll, wenn der Browser einen bestimmten Typ oder eine bestimmte Größe der Anzeige erkennt.

Einen Medientyp angeben

Mit der @ media -Regel können Sie festlegen, welche Art von Ausgabe das enthaltene CSS ändern soll. Die häufigsten Medientypen sind Bildschirm, Druck, Sprache, Handheld, Projektion und TV. Es gibt mehr, aber nur Druck und Bildschirm werden universell unterstützt.

Der folgende Code gibt beispielsweise die Schriftgröße an, wenn der Benutzer das Dokument druckt:

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

Dieses CSS kann in ein normales CSS eingebettet werden Dokument, aber es sollte normalerweise am Ende des Dokuments platziert werden, da es Ausnahmen zu den normalen Regeln enthält. Sie können innerhalb des @ media-Elements so viel CSS-Code platzieren, wie Sie möchten, aber Sie sollten nur CSS-Code einfügen, der für die spezifische Situation relevant ist, an der Sie interessiert sind.

Hinzufügen eines Qualifiers

Neben der Angabe des Medientyps hat die @ media-Regel noch einen sehr mächtigen Trick. Sie können eine spezielle Qualifizierungsbedingung auf die Medien anwenden.

Wenn der Browser breiter als 500 Pixel ist, wird schwarzer Text auf weißem Hintergrund angezeigt. Aber mach den Bildschirm schmaler und du siehst etwas Interessantes.

Normalerweise würden Sie diesen Trick verwenden, um das Layout zu ändern, aber beginnen Sie mit diesem einfacheren Farbwechselbeispiel. Hier ist der Code für dieses einfachere Beispiel:

narrowBlack. html Körper {Farbe: Schwarz; Hintergrundfarbe: weiß;} @media (max-width: 500px) {body {Farbe: weiß; Hintergrundfarbe: Schwarz;}}

Qualifier Demo
Versuchen Sie die Größe dieser Seite zu ändern. Wenn die Seite breiter als 500 Pixel ist, wird schwarzer Text auf weißem Hintergrund angezeigt.
Wenn die Seite schmaler als 500 Pixel ist, kehren die Farben um und geben weißen Text auf schwarzem Hintergrund aus.

So erstellen Sie eine Seite, die sich an die Bildschirmbreite anpasst:

1. Erstellen Sie Ihre Site wie gewohnt.

   Dies ist ein Ort, an dem sich diese ganze "separate content from layout" Sache wirklich auszahlt. Das gleiche HTML wird zwei verschiedene Stile haben.

2. Wenden Sie einen CSS-Stil wie gewohnt an.

   Bauen Sie Ihren Standardstil auf die normale Art und Weise ein - vorerst betten Sie den Stil auf der Seite mit dem Tag ein.Ihr Hauptstil sollte den häufigsten Fall behandeln. (In der Regel ein Desktop in voller Größe.)

3. Erstellen Sie eine @ media-Regel.

   Die CSS-Regel @media sollte am Ende des normalen CSS stehen.

4. Setzt einen Qualifier für die maximale Breite: 500px.

   Dieser Qualifizierer gibt an, dass die Regeln in diesem Segment nur verwendet werden, wenn die Breite des Bildschirms kleiner als 500 Pixel ist.

5. Platzieren Sie Sonderfallregeln innerhalb des neuen Style-Sets.

   Alle CSS-Regeln, die Sie innerhalb der @ media-Regel definieren, werden aktiviert, wenn der Qualifier wahr ist. Verwenden Sie diese Regeln, um das vorhandene CSS zu überschreiben. Beachten Sie, dass Sie nicht alles neu definieren müssen. Geben Sie einfach Regeln an, die in Ihrem speziellen Kontext sinnvoll sind.

6. Fügen Sie ein Ansichtsfenster hinzu.

   Mobile Browser versuchen manchmal, die Seite neu zu skalieren, damit sie alle auf einmal angezeigt werden können. Dies schlägt den Zweck eines speziellen Stils nieder. Verwenden Sie also das Metatag des Ansichtsfensters, um anzugeben, dass der Browser seine wahre Breite angeben soll. Es ist auch oft nützlich, die Seitenskalierung zu deaktivieren, da dies nicht mehr notwendig sein sollte.

In diesem Beispiel wendet der Browser immer den Hauptstil (schwarzer Text auf weißem Hintergrund) an. Dann schaut es sich die @ media-Regel an, um zu sehen, ob der Qualifizierer wahr ist.

Wenn die Breite weniger als 500 Pixel beträgt, wird das Qualifikationsmerkmal max-width: 500px als wahr bewertet, und der gesamte CSS-Code innerhalb des @ media-Segments ist aktiviert. Der Browser speichert dann beide CSS-Sätze und wendet das korrekte CSS basierend auf dem Status der Regel an.