Eine kurze Diskussion zum responsiven HTML5-Layout

1. Was ist responsives Layout?

Responsives Layout ist ein von Ethan Marcotte im Mai 2010 vorgeschlagenes Konzept. Kurz gesagt bedeutet es, dass eine Website mit mehreren Terminals kompatibel sein kann – anstatt eine bestimmte Version zu erstellen für jedes Terminal.

Dieses Konzept wurde geboren, um das mobile Surfen im Internet zu lösen. Responsive Layout kann Benutzern auf verschiedenen Endgeräten eine komfortablere Benutzeroberfläche und ein besseres Benutzererlebnis bieten. Angesichts der aktuellen Beliebtheit mobiler Geräte mit großem Bildschirm ist es nicht übertrieben, dies als allgemeinen Trend zu bezeichnen.

Da immer mehr Designer diese Technologie übernehmen, sehen wir nicht nur viele Innovationen, sondern sehen auch, dass sich einige Muster herausbilden.

2. Was sind die Vor- und Nachteile des responsiven Layouts?

Vorteile:

Starke Flexibilität bei der Betrachtung von Geräten mit unterschiedlichen Auflösungen
Kann das Problem der Multifunktion schnell lösen -Probleme bei der Anpassung der Geräteanzeige
Nachteile:

Kompatibel mit verschiedenen Geräten, hohe Arbeitsbelastung, geringe Effizienz
Umständlicher Code, versteckte nutzlose Elemente und längere Ladezeit
Tatsächlich ist dies ein Kompromiss Design Die Lösung wird von vielen Faktoren beeinflusst und kann nicht die besten Ergebnisse erzielen
Es ändert die ursprüngliche Layoutstruktur der Website bis zu einem gewissen Grad, was zu Verwirrung beim Benutzer führen kann

3. Responsives Layout Wie entwerfen?

1. Wie kann das Kompatibilitätsproblem zwischen verschiedenen Geräten gelöst werden?

Media Query in CSS3 kann dieses Problem lösen.

2. Welche Werte können durch Medienabfrage erhalten werden?

Die Breite und Höhe des Gerätebildschirms/taktilen Geräts.

Fensterbreite und -höhe rendern, Breite des Anzeigebildschirms/taktiles Gerät.

Die Handhaltungsrichtung des Geräts, horizontale oder vertikale Ausrichtung (Hochformat/Landschaft) und Drucker usw.

Seitenverhältnis-Nadeldrucker usw.

Geräte-Seitenverhältnis-Nadeldrucker usw.

Objektfarbe oder Farblistenfarbe, Farbindex wird auf dem Bildschirm angezeigt.

Auflösung des Geräts

3. Syntaxstruktur und Verwendung

Syntax: Nur @media-Gerätename (Auswahlbedingung), nicht (Auswahlbedingung) und (Geräteauswahlbedingung) ), Gerät 2 {sRules}

Verwendung:

a. Beispiel 1: Verwendung von @media im Link:

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />

Kann in der oben genannten Verwendung nur weggelassen werden, und es ist begrenzt. Bei Computermonitoren bezieht sich die erste Bedingung max-width auf die maximale Breite der Rendering-Schnittstelle und die zweite Bedingung max-device-width auf die maximale Breite des Geräts.

b. Einbetten von @media in das Stylesheet:

[Verwandte Empfehlungen]

1 – eine detaillierte Einführung in die Rolle des Viewports (Bildtext)

2. WeChat-Applet-Ansicht: Flex-Layout-Beispiel

3. HTML5-Programmierung

4. Ein Beispiel-Tutorial zur Verwendung von CO zur Handhabung asynchroner Prozesse in der Entwicklung kleiner Programme