CSS Elastic Fluid Layout trifft unterschiedliche Inhaltsanzeige

Wenn die Monitore der Benutzer immer größer werden, wird das vorherige Layout der festen Breite von 1024*768 für Benutzer mit großen Bildschirmen immer mehr. .

Um den Abfall dieser Art von Bildschirm zu reduzieren, ist die Einführung von Gummibildern die beste Lösung. Aufgrund verschiedener Einschränkungen sind die aktuellen Webseiten jedoch nicht vollständig mit den Bedingungen für die vollständige Einführung von flüssigem elastischen Layout ausgestattet (insbesondere die skrupellose Zerstörung der Standards durch Browserhersteller und die unvollständige Unterstützung der CSS -Standards usw.). Als Zwischenhändler zwischen Benutzern und Herstellern können wir uns nur mit einer kompatiblen Haltung an die Lücke zwischen beiden anpassen. Als Übergangslösung gibt es also ein solches Layout: elastisches + festes Breitenlayout.

Die hier erwähnte Elastizität bezieht sich auf den Hintergrund, der sich an die Bildschirmbreite anpasst, während die feste Breite bedeutet, dass der Hauptinhalt automatisch sowohl im Breitbildschirm als auch im schmalen Bildschirm zentriert werden kann. Überleben Sie in der Lücke, um die Bedürfnisse von Benutzern mit unterschiedlichen Größen und Auflösungen zu erfüllen. Das in der folgende Abbildung gezeigte Design ist ein typisches Beispiel.

Lassen Sie uns weniger Unsinn sprechen und auf den Punkt zurückkehren. Lassen Sie uns eine solche Layoutstruktur erstellen.

Erstellen Sie zuerst die strukturelle Schicht:

Lassen Sie uns die Strukturschicht analysieren. So entwerfen wir auf diese Weise?

Wir setzen die Wrapper- und Fußzeilenbehälter auf eine Breite von 100%, um sich automatisch an die Breite des Bildschirms anzupassen. Setzen Sie auch den Kopfzeilenbereich auf 100% Breite. Auf diese Weise können wir ein horizontal gefliestes Bild in den Kopf und die Fußzeile einfügen, damit der Hintergrund von Header und Fußzeile den gesamten Bildschirmraum horizontal unter dem großen Bildschirm füllen kann.

Als Hauptinhalt besteht unser allgemeiner Ansatz darin, ihn zentrieren zu lassen und Blanks auf beiden Seiten zu lassen, wenn die Auflösung größer wird. Da der Kopfzeilenbereich auf eine Breite von 100% eingestellt wurde, fügen wir dem Header eine Containerschicht hinzu, die als Träger des realen Header -Textinhalts dient. Lassen Sie es automatisch zentrieren.

Auf diese Weise schwebt der Text des Headers die obere Schicht des Haaaders.

Aus dem gleichen Grund kann die Fußzeile auch auf diese Weise implementiert werden.

In der obigen Strukturschicht habe ich diese Methode nicht im mittleren Inhaltsbereich verwendet, sondern eine kleine Problemumgehung. Was sollten wir tun, wenn wir auf beiden Seiten des Textes unter großer Auflösung nicht zu hohl erscheinen? Um das Nisten zu verringern, können wir natürlich Workarounds annehmen. Wir können dem Hintergrund im Körper ein übergroßes Bild hinzufügen und die Hintergrundposition verwenden, um das Bild in der Mitte zu positionieren, damit die Bilder auf beiden Seiten des Inhaltsbereichs angezeigt werden.

Dieser Blog ist ein spezieller Fall. und der Inhalt des Textes wird immer in der Mitte angezeigt.

Um den Effekt zu demonstrieren, fügen wir einige andere Farbanpassungen hinzu, und der endgültige Stil lautet wie folgt: