In diesem Artikel wurde das Konzept des reaktionsschnellen Layouts, die Vor- und Nachteile von reaktionsschnellem Layout, Designkonzepten und spezifischem Implementierungscode ausführlich erklärt. Es ist ein seltener Artikel. Hier empfehlen wir es Freunden . 1. Was ist reaktionsschnell Layout?
Responsive Layout ist ein Konzept, das Ethan Marcotte im Mai 2010 vorgeschlagen hat. Kurz gesagt, eine Website kann mit mehreren Terminals kompatibel sein - anstatt eine bestimmte Version für jedes Terminal zu erstellen.
Dieses Konzept wurde geboren, um mobiles Internet -Surfen zu lösen. Responsive Layout kann Benutzern verschiedener Terminals eine komfortablere Oberfläche und eine bessere Benutzererfahrung bieten. Darüber hinaus ist es mit der aktuellen Popularisierung von Mobilgeräten mit großem Bildschirm keine Übertreibung, um es als allgemeine Trend zu beschreiben.
Da immer mehr Designer diese Technologie übernehmen, sehen wir nicht nur viele Innovationen, sondern auch einige geformte Modelle.
2. Was sind die Vor- und Nachteile des Responsive Layout? Vorteil:Starke Flexibilität angesichts verschiedener Auflösungsgeräte
Kann schnell Multi-Geräte-Display-Anpassungsprobleme lösen
Mangel:Kompatibel mit verschiedenen Geräten, hoher Arbeitsbelastung und geringem Effizienz
Der Code ist umständlich und die verborgenen und nutzlosen Elemente werden erscheinen, die die Ladezeit erhöhen.
Tatsächlich handelt es sich um eine Kompromiss -Designlösung, die aufgrund des Einflusses mehrerer Faktoren nicht die besten Ergebnisse erzielen kann.
Bis zu einem gewissen Grad wird die ursprüngliche Layoutstruktur der Website geändert und die Verwirrung der Benutzer erfolgt
3. Wie kann man ein reaktionsschnelles Layout entwerfen?1. Wie kann man das Kompatibilitätsproblem zwischen verschiedenen Geräten lösen?
Medienabfrage in CSS3 kann dieses Problem lösen.
2. Welche Werte können Medienabfrage erhalten?
Gerätebreite, Geräte-Higth zeigt Bildschirm/Tastes Gerät an.
Rendern Sie die Breite und Höhe des Fensters, HEGTH Zeigt das Bildschirm/taktile Gerät an.
Die Handheldrichtung des Geräts, horizontale oder vertikale Ausrichtung (Porträt | Lanscape) und Drucker usw.
Bildschirmverhältnis Aspekt-Verhältnis-DOT-Matrixdrucker usw.
Geräte-Verhältnis Gerätematrixdrucker usw.
Objektfarbe oder Farbliste Farbe, Color-Index zeigt den Bildschirm an.
Auflösung des Geräts
3. Syntaxstruktur und Verwendung
Syntax: @media Geräte Name nur (Bedingung auswählen) Nicht (Bedingung) und (Geräteauswahlbedingung), Gerät zwei {srules}
Verwendung:
A. Beispiel 1: Verwenden Sie @Media in Link:
<link rel = stylesheet type = text /css media = nur Bildschirm und (max-Width: 480px), nur Bildschirm und (max-Device-Width: 480px) href = link.css rel = externer nofollow />
Nur in der obigen Verwendung kann verwendet und auf einen Computermonitor beschränkt werden. Die erste maximale Bedingung bezieht sich auf die maximale Breite der Rendering-Grenzfläche, und die zweite Bedingung maximal die maximale Breite auf die maximale Breite des Geräts.
B. Einbetten @media in das Stylesheet:
Kopieren Sie den Code