Zusammenfassung relevanter Erkenntnisse zur Umsetzung adaptiven Webdesigns

Wie funktioniert „Adaptives Webdesign“? Eigentlich ist es gar nicht so schwierig.

1. Lassen Sie die Breite der Webseite automatisch anpassen:

Fügen Sie zunächst eine Zeile mit einem Viewport-Meta-Tag zum Kopf des Webseitencodes hinzu.

Code kopieren

Der Code lautet wie folgt:

Ansichtsfenster ist die Standardbreite und -höhe der Webseite. Die obige Codezeile bedeutet, dass die Breite der Webseite standardmäßig der Bildschirmbreite (Breite = Gerätebreite) entspricht und das ursprüngliche Skalierungsverhältnis (Anfangsmaßstab = 1) 1,0 beträgt, d. h. die Anfangsgröße der Webseite nimmt 100 % der Bildschirmfläche ein.

Für die alten Browser IE6, 7, 8 ist eine JS-Verarbeitung erforderlich. Da die Hauptplattformen iOS und Android sind, können wir die fehlende Unterstützung von Opera vorübergehend ignorieren.

2. Verwenden Sie keine absolute Breite

Da die Webseite ihr Layout entsprechend der Bildschirmbreite anpasst, können Sie kein Layout mit absoluter Breite oder Elemente mit absoluter Breite verwenden. Dies ist sehr wichtig.

Insbesondere kann im CSS-Code keine Pixelbreite angegeben werden:

Breite: xxx px;

Zur Definition der Spaltenbreiten können ausschließlich Prozentwerte angegeben werden:

Breite: xx%;

oder:

Breite: automatisch;

oder:

Verwenden Sie maximale Breite und maximale Höhe: max. Breite, max. Höhe;

3. Relative Schriftgröße

Die Größe von Schriftarten kann nicht absolut (px), sondern nur relativ (em) festgelegt werden.

Code kopieren

Der Code lautet wie folgt:

Körper {
Schriftart: normal 100 % Helvetica, Arial, serifenlos;
}

Der obige Code gibt an, dass die Schriftgröße 100 % der Standardgröße der Seite beträgt, also 16 Pixel.

Code kopieren

Der Code lautet wie folgt:

h1 {
Schriftgröße: 1,5em;
}

Die Größe von h1 beträgt dann das 1,5-fache der Standardgröße, also 24 Pixel (24/16 = 1,5).

Code kopieren

Der Code lautet wie folgt:

klein
Schriftgröße: 0,875em;
}

Die Größe des kleinen Elements beträgt das 0,875-fache der Standardgröße, also 14 Pixel (14/16 = 0,875).

4. Fließendes Gitter
„Fließendes Layout“ bedeutet, dass die Positionen jedes Blocks schwebend und nicht festgelegt sind.

Code kopieren

Der Code lautet wie folgt:

.hauptsächlich {
schweben: rechts;
Breite: 70%;
}
.linkeLeiste {
schweben: links;
Breite: 25 %;
}

Der Vorteil von Float besteht darin, dass, wenn die Breite zu klein ist, um zwei Elemente aufzunehmen, das letztere Element automatisch an das Ende des ersteren gescrollt wird und nicht horizontal überläuft. Dadurch wird das Auftreten einer horizontalen Bildlaufleiste vermieden.
Darüber hinaus müssen Sie bei der Verwendung der absoluten Positionierung (Position: absolute) sehr vorsichtig sein.

5. Der Kern des „adaptiven Webdesigns“ ist das von CSS3 eingeführte Media Query-Modul

Das bedeutet, dass die Bildschirmbreite automatisch erkannt wird und dann die entsprechende CSS-Datei geladen wird.
Medien="Bildschirm und (maximale Gerätebreite: 400px)"
href="tinyScreen.css" />
Der obige Code bedeutet, dass die Datei tinyScreen.css geladen wird, wenn die Bildschirmbreite weniger als 400 Pixel beträgt (max-device-width: 400px).
Medien="Bildschirm und (Mindestbreite: 400px) und (Maximalgerätebreite: 600px)"
href="smallScreen.css" />
Wenn die Bildschirmbreite zwischen 400px und 600px liegt, wird die Datei smallScreen.css geladen.
Zusätzlich zum Laden von CSS-Dateien mithilfe von HTML-Tags können Sie diese auch in vorhandene CSS-Dateien laden.
@import url("tinyScreen.css") Bildschirm und (maximale Gerätebreite: 400px);

6. CSS @media-Regeln

In derselben CSS-Datei können Sie auch je nach Bildschirmauflösung unterschiedliche CSS-Regeln anwenden.

Code kopieren

Der Code lautet wie folgt:

@media screen und (max-device-width: 400px) {
.Spalte {
Schwimmer: keiner;
Breite: automatisch;
}
#Seitenleiste {
Anzeige: keine;
}
}

Der obige Code bedeutet, dass, wenn die Bildschirmbreite weniger als 400 Pixel beträgt, der Spaltenblock nicht schwebt (float:none), die Breite automatisch angepasst wird (width:auto) und der Seitenleistenblock nicht angezeigt wird (display:none).

Verwenden Sie ein lineares Design für Spalten und Floats:

Code kopieren

Der Code lautet wie folgt:

@media screen und (max-width: 480px) {
div,li {
Anzeige: Block;
Schwimmer: keine;
Breite: 100 %;
}
}

7. Flüssiges Bild

Beim „Responsive Webdesign“ muss neben Layout und Text auch eine automatische Skalierung der Bilder erreicht werden.
Hierzu ist nur eine Zeile CSS erforderlich:
img { max-width: 100%;}
Diese Codezeile funktioniert auch für die meisten in Webseiten eingebetteten Videos und kann daher wie folgt geschrieben werden:
img, Objekt { max-width: 100%;}
Ältere IE-Versionen unterstützen die maximale Breite nicht, daher müssen Sie Folgendes schreiben:
img { Breite: 100 %; }
Darüber hinaus kann es beim Skalieren von Bildern auf der Windows-Plattform zu Bildverzerrungen kommen. Zu diesem Zeitpunkt können Sie versuchen, den proprietären Befehl des Internet Explorers zu verwenden:
img { -ms-interpolation-mode: bikubisch; }
Alternativ imgSizer.js von Ethan Marcotte.

Code kopieren

Der Code lautet wie folgt:

addLoadEvent(Funktion() {
var imgs = document.getElementById_x_x_x_x("Inhalt").getElementsByTagName("Bild");
imgSizer.collate(imgs);
});

Wenn die Bedingungen es erlauben, ist es jedoch am besten, Bilder mit unterschiedlichen Auflösungen entsprechend der Bildschirmgröße zu laden. Hierzu gibt es viele Möglichkeiten, sowohl auf der Server- als auch auf der Clientseite.

8. Suchleiste für Startseiteninhalte, Produktkategorien, beliebte Produkte, Schlüsselwörter.

9. Vermeiden Sie horizontale Bildlaufleisten

Manchmal verhindern Bilder oder andere Seitenelemente den normalen Fluss des Containerelements. Das folgende Skript kann dieses Verhalten leicht verhindern:

Code kopieren

Der Code lautet wie folgt:

img,iframe {max-width:100%;box-sizing:border-box;}

<<: CSS3-Filtercode zum Erreichen des Grau- oder Schwarzmodus auf Webseiten

>>: Allgemeine Schreibbeispiele für MySQL- und Oracle-Batch-Insert-SQL

Nginx übernimmt die Analyse des Implementierungsprozesses für HTTP-Anforderungen

Zusammenfassung relevanter Erkenntnisse zur Umsetzung adaptiven Webdesigns

Nginx übernimmt die Analyse des Implementierungsprozesses für HTTP-Anforderungen

Eine detaillierte Einführung in die Speicherverwaltung und -adressierung unter Linux

So implementieren Sie abgerundete Ecken mit CSS3 unter Verwendung von JS

Detailliertes Tutorial zur Installation von Protobuf 3 unter Ubuntu

Ein kurzer Vergleich von Props in React

Lösung für das React-Programm „reine Funktionskomponente setState“ aktualisiert die Seitenaktualisierung nicht

Übertragung von Routing-Parametern für die Kommunikation von React-Komponenten (react-router-dom)

So installieren Sie eine MySQL-Datenbank im Deepin 2014-System

Zusammenfassung der Benutzererfahrung

Wissenspunkte und Nutzungsdetails zu globalen Variablen und globalen Objekten von Nodejs

Artikel empfehlen

Beispielcode für kreisförmigen Hover-Effekt mit CSS-Übergängen

Die benutzerdefinierte Vue-Komponente implementiert eine bidirektionale Bindung

Zusammenfassung neuer Anwendungsbeispiele für Calculated in Vue3

Hintergrundbild-Cache unter IE6

Analyse und Lösung des Grundes, warum das Frameset-Tag in HTML nicht normal angezeigt werden kann

JavaScript implementiert das Ändern der Farbe einer Webseite über einen Schieberegler

Best Practices zur Implementierung einfacher Jira-Projekte mit React+TS

Detaillierte Schritte zum Einrichten des Hosts Nginx + Docker WordPress Mysql

Detaillierte Erläuterung mehrerer Methoden zur Deduplizierung im Javascript-Array

Einige CSS-Fragen, die Ihnen während eines Vorstellungsgesprächs gestellt werden könnten

Tutorial zum Anmelden bei MySQL nach der Installation von Mysql 5.7.17

Lösung für das Problem, dass VC6.0 bei Installation unter WIN10 nicht verwendet werden kann

K3s-Erste-Schritte-Handbuch - Detailliertes Tutorial zum Ausführen von K3s in Docker

So schreiben Sie die übergeordneten und untergeordneten Verzeichnisse von relativen HTML-Pfaden

So verwenden Sie Celery und Docker zum Ausführen periodischer Aufgaben in Django