suchen

Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Diskussion über HTML5-Responsive-Layout_HTML5-Tutorialfähigkeiten

Eine kurze Diskussion über HTML5-Responsive-Layout_HTML5-Tutorialfähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:46:581293Durchsuche

1. Was ist responsives Layout?

Responsive 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 für jedes Terminal eine spezifische Version zu erstellen.

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 einige sich bildende Muster.

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

Vorteile:

Starke Flexibilität bei Geräten mit unterschiedlichen Auflösungen
Kann das Problem der Anzeigeanpassung mehrerer Geräte schnell lösen
Nachteile:

Kompatibel mit verschiedenen Geräten, hohe Arbeitslast und geringe Effizienz
Der Code ist umständlich, versteckte nutzlose Elemente werden angezeigt und die Ladezeit verlängert sich
Tatsächlich handelt es sich hierbei um eine Kompromiss-Designlösung, die betroffen ist Viele Faktoren. Nicht optimale Ergebnisse
Es verändert die ursprüngliche Layoutstruktur der Website bis zu einem gewissen Grad, was zu Verwirrung beim Benutzer führen kann

3. Wie entwerfe ich ein responsives Layout?

1. Wie lassen sich die Kompatibilitätsprobleme zwischen verschiedenen Geräten lösen?

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/Haptikgeräts (Gerätebreite, Gerätehöhe).

Die Breite und Höhe des Rendering-Fensters, die Höhe des Anzeigebildschirms / des taktilen Geräts.

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

Nadeldrucker mit Seitenverhältnis usw.

Geräte-Seitenverhältnis-Nadeldrucker usw.

Objektfarbe oder Farblistenfarbe, Farbindex wird auf dem Bildschirm angezeigt.

Die Auflösung des Geräts

3. Grammatische Struktur und Verwendung

Syntax: @media nur Gerätename (Auswahlbedingung), nicht (Auswahlbedingung) und (Geräteauswahlbedingung), Gerät zwei {sRules}

Verwendung:

a. Beispiel 1: Verwenden Sie @media im Link:

                    

Wird in der obigen Verwendung von ONLY weggelassen und ist auf Computeranzeigen beschränkt. Die erste Bedingung „Max-Width“ bezieht sich auf die maximale Breite der Rendering-Schnittstelle und die zweite Bedingung „MAX-DEVIDE-WIDTH“ bezieht sich auf die maximale Breite des Geräts.

b. Betten Sie @media in das Stylesheet ein:


Code kopieren
Der Code lautet wie folgt:

@media (min-device -width: 1024px) und (max-width:989px),screen und (max-device-width:480px),(max-device-width:480px)
und (orientierung:querformat),(min-device- width:480px ) und (max-device-width:1024px) und (orientation:portrait) {srules}

Définissez la résolution (largeur) de l'écran de l'ordinateur pour qu'elle soit supérieure ou égale à 1024 px (et la largeur visible maximale est de 989 px) ; la largeur de l'écran est de 480 px et inférieure pour les appareils portables ; c'est-à-dire que la taille 480 est parallèle au sol) appareil portable

La largeur de l'écran est supérieure ou égale à 480px et inférieure à 1024px et le style css de l'appareil est placé verticalement.

4. Implémenter une mise en page réactive


Copier le code
Le code est le suivant :