9 Schlüsselpunkte des responsiven Webdesigns

Responsives Webdesign ist eine tolle Lösung für das Multi-Screen-Problem, ist aber aus gedruckter Sicht etwas schwierig. Es gibt keine festen Seitengrößen, keine Millimeter oder Zoll, keine physischen Einschränkungen, keine Möglichkeit, anzufangen. Auch der ausschließliche Einsatz von Pixel-Design-Methoden für Desktop und Mobile gehört der Vergangenheit an, da immer mehr Geräte Websites öffnen können. Deshalb müssen wir einige Grundprinzipien des responsiven Webdesigns klären und flüssige Webseiten akzeptieren, anstatt dagegen anzukämpfen.

1. Responsives vs. adaptives Webdesign

Sie scheinen gleich zu sein, sind es aber nicht. Es gibt keine Aussage darüber, welche Methode richtig und welche falsch ist. Der Inhalt bestimmt alles.

2. Inhaltsfluss

Wenn die Bildschirmgröße kleiner wird, nimmt der Inhalt mehr vertikalen Platz ein und der Inhalt wird nach unten verschoben. Dies kann etwas schwierig sein, wenn Sie mit Pixeln und Punkten entwerfen, aber wenn Sie sich erst einmal daran gewöhnt haben, wird es Sinn machen.

3. Relative Einheit

Die Leinwandgröße kann Desktop, Mobilgerät oder jede beliebige Größe dazwischen sein. Auch die Pixeldichte kann variieren, daher benötigen wir flexible Einheiten, die auf verschiedenen Bildschirmen eingesetzt werden können. Hier bieten sich relative Einheiten wie Prozentsätze an. Wenn Sie also eine Breite von 50 % einstellen, bedeutet dies, dass es die Hälfte des Bildschirms einnimmt (oder Ansicht, was der Größe des geöffneten Browserfensters entspricht).

4. Haltepunkte

Haltepunkte ermöglichen die Änderung des Layouts an vordefinierten Punkten. Beispiel: Auf dem Desktop-Bildschirm gibt es drei Spalten, auf dem mobilen Bildschirm jedoch nur eine Spalte. Die meisten CSS--Eigenschaften können basierend auf Haltepunkten geändert werden. Normalerweise legen Sie Haltepunkte basierend auf bestimmten Inhalten fest. Wenn ein Satz die Bildschirmlänge überschreitet, möchten Sie möglicherweise einen Haltepunkt hinzufügen. Verwenden Sie Haltepunkte jedoch mit Vorsicht – es kann schnell zu Verwirrung führen, wenn es schwierig ist zu verstehen, was was beeinflusst.

5. Maximal- und Minimalwerte

Manchmal ist es gut, wenn der Inhalt die gesamte Bildschirmbreite einnimmt, beispielsweise auf mobilen Geräten. Aber wenn es auf einem Fernsehbildschirm läuft und derselbe Inhalt die gesamte Breite Ihres Bildschirms einnimmt, macht es normalerweise nicht viel Sinn. Hier kommen die Min/Max-Werte ins Spiel. Wenn Sie beispielsweise width auf 100 % und dann max-width auf 1000 Pixel setzen, füllt der Inhalt den Bildschirm aus, überschreitet jedoch nicht die Größe von 1000 Pixel.

6. Verschachtelte Objekte

Erinnern Sie sich an die relative Position? Es ist schwierig, die Positionierung vieler Elemente abhängig von der Positionierung anderer -Elemente zu steuern. Daher kann die Verwendung von Containern zum Umschließen von Elementen das Verständnis und die Übersichtlichkeit verbessern. Hier kommen statische Einheiten (wie Pixel) ins Spiel. Sie sind nützlich für Inhalte, die nicht modular sein sollen (wie ein Logo oder eine Schaltfläche).

7. Mobil- oder Desktop-Priorität

Technisch gesehen gibt es keine, wenn ein Projekt mit einem kleineren Bildschirm beginnt, zu einem größeren Bildschirm wird (mobil zuerst) oder umgekehrt (Desktop hat Vorrang). großer Unterschied. Es werden jedoch zusätzliche Einschränkungen hinzugefügt, die Ihnen bei der Entscheidung helfen können, ob Sie zuerst mit Mobilgeräten beginnen möchten. Normalerweise schreibt jeder am Anfang beide Enden zusammen, so ist es besser zu sehen, welches besser läuft.

8. Web-Schriftarten vs. Systemschriftarten

Wünschen Sie sich eine coole Futura- oder Didot-Schriftart auf Ihrer Website? Webfonts sind verfügbar! Obwohl sie großartig aussehen, denken Sie daran, dass das Laden Ihrer Seite umso länger dauert, je mehr Schriftarten Sie eingeben. Andererseits ist das Laden von Systemschriftarten blitzschnell, aber wenn der Benutzer nicht lokal über die Schriftarten verfügt, wird auf die Standardschriftart zurückgegriffen.

9. Bitmap vs.

Vektor

Haben Sie jemals darüber nachgedacht, Ihren Symbolen viele Details und ausgefallene Effekte hinzuzufügen? Wenn Sie darüber nachdenken, ist die Verwendung von Bitmaps besser geeignet. Wenn nicht, erwägen Sie die Verwendung von Vektorgrafiken. Verwenden Sie für Bitmaps Bilder im JPG-, PNG- oder GIF-Format, während Sie für Vektoren SVG oder Symbolschriftarten am besten wählen. Jedes hat entsprechende Vor- und Nachteile. Aber auch die Größe des

Bildes muss berücksichtigt werden – Bilder auf der Webseite müssen optimiert werden. Andererseits sind Vektorbilder meist kleiner, einige ältere Browser unterstützen sie jedoch nicht. Außerdem kann es schwerer sein als eine Bitmap, wenn es viele Kurven aufweist. Wählen Sie also sorgfältig aus.

Das obige ist der detaillierte Inhalt von9 Schlüsselpunkte des responsiven Webdesigns. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!