Responsive Webdesign lernen (1) - Bildschirmgrösse und prozentuale Nutzung bestimmen

Heutzutage erfreuen sich mobile Geräte immer größerer Beliebtheit und immer häufiger nutzen Benutzer Smartphones und Pads zum Surfen im Internet. Allerdings können herkömmliche Seiten mit festem Inhalt auf mobilen Endgeräten nicht gut angezeigt werden. Aus diesem Grund schlug Ethan Marcotte das Konzept des Responsive Webdesigns vor.

Die englische Bezeichnung für Responsive Webdesign lautet Responsive Web Design, abgekürzt RWD.

Ich habe mir aus der Bibliothek ein Buch mit dem Titel „Head First Mobile Web“ von O’REILLY ausgeliehen, in dem einige Techniken zum Durchführen von RWD beschrieben werden.

Zwei Dinge, die ich heute gelernt habe, sind:

1. Verwenden Sie Medieninformationen, um die Bildschirmgröße zu bestimmen

2. Verwenden Sie Prozentsätze, um zuvor verwendete Pixel zu ersetzen, um größenbezogene Informationen wie die Breite anzugeben

Schauen Sie sich die Ergebnisse des heutigen Experiments an ( am Ende dieses Artikels finden Sie einen Download-Link für das experimentelle Beispiel ):

Video:

Bei Anzeige der Seite im Vollbildmodus

Beim Einschränken des Browsers zur Nachahmung eines Mobilgeräts:

Wie geht das?

Verwenden Sie zunächst die Medienanweisung in der CSS-Datei

Wenn Ihre Webseiten auf unterschiedliche Gerätegrößen reagieren sollen, müssen Sie sich im Voraus auf jede Größe vorbereiten. Auf einem normalen PC-Monitor könnte es beispielsweise in drei Spalten wie folgt angezeigt werden:

Auf mobilen Geräten, wie beispielsweise Smartphones, kann eine Verteilung im Streaming notwendig sein, und zwar wie folgt:

Offensichtlich ist die CSS-Verteilung der beiden unterschiedlich. In der dreispaltigen Anzeige in der obigen Abbildung müssen die Spalten auf der linken und rechten Seite jeweils in die erforderliche Richtung schweben, während im Flusslayout in der Abbildung unten die Blöcke seriell nach unten angezeigt werden. Daher ist ersichtlich, dass zumindest für jede unterschiedliche CSS-Verteilung eine andere Strategie vorhanden sein sollte. Jetzt können Sie zwei verschiedene CSS-Dateien bearbeiten und diese mit der Direktive <link> importieren. Sie können die @media-Anweisung jedoch auch verwenden, um logische Beurteilungen vorzunehmen. Wie folgt: @media screen and ( min-width :480px){/*css style*/}

Der Bildschirm ist einer der vielen Medientypen, zu den anderen gängigen Medientypen zählt beispielsweise der Druck. Die Mindestbreite ist eines der Merkmale von Medien. Medien verfügen über zahlreiche Merkmale, die uns dabei helfen können, logische Urteile zu fällen. Zu den häufigsten gehören Monochrom, maximale Breite usw.

Mithilfe dieser @media-Anweisung können wir logische Urteile ähnlich wie bei if-else treffen. Beispielsweise werden die beiden im Beispiel angegebenen unterschiedlichen Situationen anhand der folgenden Aussagen beurteilt:

Dies bedeutet, dass die CSS-Einstellungen in den geschweiften Klammern verwendet werden, wenn es sich um ein „Druckgerät“ oder ein „Gerät mit monochromem Bildschirm“ handelt.

Ersetzen Sie als Nächstes die den Abmessungen zugeordneten Pixeleinheiten durch Prozentwerte.

Wenn Sie zum ersten Mal entwerfen, entwerfen Sie einfach nach dem Prozentsatz, wie zum Beispiel

Darüber hinaus können Sie auch der traditionellen Methode zum Entwerfen von Webseiten folgen und zuerst die Pixel jedes Bereichs bestimmen. Wenn beispielsweise der Hauptbereich 460 Pixel groß ist und die Breite der gesamten Webseite auf 960 Pixel festgelegt ist, beträgt die Breite des Hauptbereichs 460/960 = 47,92 %. Diese Konvertierungsmethode kann beim Rekonstruieren der Webseite verwendet werden.

【Testbeispiel herunterladen】