Erstellen Fluid-Layout mit HTML5 und CSS3, kreativem Bloq
Niemand viel gesorgt, dass Sätze auf einem Bildschirm im Vergleich zu einem anderen ein wenig anders aussahen. Doch wie CSS-basierte Designs übernahm, ermöglicht es Web-basierte Designs genauer nachahmen Druck. Mit diesem Übergang, für viele (mich eingeschlossen), schrumpften proportional basierte Layouts seit vielen Jahren für ihren starren, pixelbasierten Pendants.
Aber wie alle Dinge, proportional Designs haben um wieder kommen. Das Mini, dauergewelltes Haar (Ich wünsche!) Und abgefackelt Jeans hat alle ihre Comebacks im Laufe der Jahre. Nun ist es Zeit für eine proportionales Layout ein Wiedererscheinen zu machen.
- Software: Text-Editor, Browser
- Projektlaufzeit: 1-2 Stunden
- Fähigkeiten. Erfahren Sie, warum proportional Layouts notwendig sind für Responsive Design, konvertieren pixelbasierte Elementbreiten zu proportional Prozentsätze umwandeln pixelbasierte Typografie Größen ihrer em-basierte Äquivalent, zu verstehen, wie der Kontext für jedes Element finden
- Support-Datei
01. Feste Layouts sind nicht zukunftssicher
02. Warum proportional Layouts sind für ansprechende Designs
Während Medienabfragen mächtig sind, sind wir jetzt von einigen Einschränkungen bewusst. Jedes feste Breite Design, mit nur Medien-Anfragen für verschiedene Ansichtsfenster anzupassen, wird nur ‚Snap‘ von einem Satz von CSS-Medienabfrage Regeln auf den nächsten ohne lineare Progression zwischen den beide.
Stattdessen wollen wir einen Entwurf erstellen, die sich biegt und schaut auf allen Ansichtsfenstern gut, nicht nur insbesondere solche in einer Medien Abfrage angegeben. Ich werde auf den Punkt: Wir brauchen unser festes, pixelbasierten Layout Flüssigkeit, proportional diejenigen zu wechseln. Dies wird Elemente ermöglichen, Ansichtsfenster, bis eine Medienabfrage oder eine andere modifiziert das Styling relativ zu skalieren.
03. Proportional-Layout und Medien-Anfragen
04. Änderung ein Design von einem festen in einen proportionalen Layout
05. Eine Formel zu erinnern
Ziel ÷ context = Ergebnis
06. Umfassung Flüssigkeits Layouts
Was ist wichtig zu beachten, ist die CSS wir derzeit verwenden, die Breiten der Hauptstruktur (Header, Navigation, Sidebar, Inhalt und Fußzeile) Elemente einzustellen. Ich habe so viele der Styling-Regeln verzichtet wir auf Struktur konzentrieren können:
Alle Werte sind zur Zeit Pixel eingestellt. Lassen Sie sich von dem äußersten Elemente arbeiten und sie ändern, Prozentsatz proportional das Ziel ÷ context = Ergebnis Formel.
07. Einstellen eines Kontextes für Elemente proportional
Wir brauchen etwas zu ‚halten‘ und sich der Kontext für alle proportionalen Elemente (Inhalt, Sidebar, Footer, und so weiter) wollen wir in unserem Entwurf enthalten. Deshalb brauchen wir einen proportionalen Wert für die Breite einzustellen, die die #wrapper in Bezug auf die Darstellungsgröße sein sollten. Denn jetzt, lassen Sie uns eine Null und Rolle mit 96 Prozent abschlagen und sehen, was passiert. Hier ist die geänderte Regel für #wrapper:
Und hier ist, wie es im Browser-Fenster aussieht:
So weit, ist es gut! 96 Prozent funktioniert eigentlich ganz gut hier, obwohl wir für 100 oder 90 Prozent entschieden haben könnte - was auch immer das Design im Ansichtsfenster in den meisten ästhetisch ansprechende Art und Weise eingestellt.
Nach Änderung der alle Pixelbreiten in Prozentsätze, sieht die entsprechende CSS wie folgt aus:
Der folgende Screenshot zeigt das Ergebnis in Firefox mit dem Ansichtsfenster um 1000 px breit:
Die Entwicklungsflüssigkeit Layout, gesehen in Firefox
08. Können wir nicht runden nur die Zahlen?
09. Konvertieren der anderen Layout-Elemente
Alles sieht immer noch in der gleichen Darstellungsgröße in Ordnung. Allerdings ist der Navigationsbereich nicht verhalten. Wenn ich die Darstellungsgröße in nur ein wenig bringen, beginnen die Links zwei Linien zu überbrücken:
Das war einfach genug! Lassen Sie uns einfach lassen Sie im Browser in Ordnung ist.
Das Ergebnis unserer Änderung des Link-Layout: Befestigungs ein Problem hat eine andere erstellt
10. Denken Sie immer daran den Kontext
Wie es oft der Fall ist, stellt sich heraus, dass es dieses Problem verschiedene Wege zur Lösung. Wir konnten eine explizite Breite der hinzufügen
Wir könnten stattdessen die CSS für die Änderung
Und hier ist, wie das Ergebnis im Browser breit mit einem Ansichtsfenster 1200 px aussieht:
Die Navigation wird immer es jetzt, aber ich habe immer noch das Problem der Navigations-Links Spanning zwei Linien als das Ansichtsfenster kleiner wird, zumindest bis ich unter 768 px breit, wenn die Medien Abfrage wir früher geschrieben [in Kapitel 2 des Buches von dem dieser Artikel ist ein Auszug], um die aktuellen Navigations Stile außer Kraft setzt. Bevor wir mit der Navigation beginnen Festsetzung, werde ich all meine Typographie Größen von fester Größe Pixel zur Proportionaleinheit wechseln, ems.
11. Verwendung EMS anstatt Pixeln für Typographie
Hier sind zwei offensichtlichen Gründen: erstens jemand noch den Internet Explorer 6 verwenden (ja, diese beiden Personen) automatisch die Möglichkeit bekommt, den Text zu vergrößern; und zweitens macht es das Leben für Sie, den Designer / Entwickler, viel einfacher.
Mit unserer gleichen Ziel ÷ context = Ergebnis Formel, ich werde jede Pixel-basierte Schriftgröße ems konvertieren. Es lohnt sich zu wissen, dass alle modernen Desktop-Browser 16 Pixel als Standard-Schriftgröße verwenden (sofern nicht ausdrücklich anders angegeben). Deshalb von Anfang an, das gleiche Ergebnis liefert eine der folgenden Regeln, um den Körper Tag Anwendung:
Wie in 48 ÷ 16 = 3, unseren Stil ändert sich wie folgt:
Unsere neue em-basierten CSS sieht wie folgt aus:
Sie können hier sehen, dass die Schriftgröße der (die 38 px war) Element ist in Bezug auf das Mutterelement (69, das Pixel war). Weiterhin wird die Linienhöhe (die 40 Pixel war) in Bezug auf die Schrift selbst festgelegt (die 38 Pixel war).
Aber was auf der Erde ist ein em?
Der Begriff ‚em‘ ist einfach eine Möglichkeit, den Buchstaben M in schriftlicher Form auszudrücken, und wird auf die gleiche Art und Weise ausgesprochen. (Historisch wurde der Buchstabe M verwendet, um die Größe einer bestimmten Schriftart zu etablieren, da es das größte der Buchstaben ist.) Heute em wie eine Messung des Anteils eines bestimmten Buchstaben Breite und Höhe in Bezug auf die Größe Punkt definiert von eine bestimmte Schriftart.
Weitergehen
Dieser Artikel ist ein exklusiver Auszug aus Ben Frain Buch Responsive Web Design mit HTML5 und CSS3, veröffentlicht von Packt Publishing. Die eBook Ausgabe kostet derzeit £ 12.71, und die Print-Ausgabe £ 22.49, einschließlich dem E-Book. Sie können sie beide hier kaufen.