In einem anderen Artikel in meinem Artikel "Elastic + Festbreite Layout" habe ich einen Layoutplan mit elastischer Mindestbreite vorgestellt, und jetzt werde ich einen weiteren Layoutplan einführen - elastisches Fluid -Layout.
Diese Lösung ist eigentlich eine flexible Anwendung dieses Layouts. Der größte Vorteil des elastischen Layouts besteht darin, dass es den Bildschirmraum voll nutzen kann. Unabhängig davon, wie groß die Kundenauflösung ist, kann sie sich automatisch an die Veränderungen der Breite anpassen.
Bild 1
Schauen Sie sich das Bild oben an. Dies ist eine ausländische Website. Es ist ein Layout mit fester Breite. Unser Layout basiert auf diesem Bild. Natürlich werde ich keine umfassende Einführung in die Erstellung dieser vollständigen Seite geben. Ich werde sie nur den wichtigsten Punkten erklären.
Tatsächlich ist es relativ einfach, ein elastisches Layout zu erstellen, aber obwohl dieses Layout einfach ist, ist das Verständnis der Details die Essenz dieses Layouts. Obwohl das elastische Layout so gute Vorteile hat, hat es relativ tödliche Mängel:
Daher kann dieser Artikel relativ weniger Erklärungen zum Layout haben, und es geht mehr darum, die oben genannten zwei Probleme zu lösen. Ich glaube, dass dieses Layout, solange die oben genannten zwei Probleme gelöst sind, relativ einfacher sein wird.
Im Allgemeinen verwenden elastische Layouts Prozentsätze, um die Breite eines Behälters zu setzen. Dies passt sich automatisch an die Breite des Bildschirms an. Der Breitenwert kann jedoch vom Benutzer nicht vollständig frei skaliert werden. Wir müssen die Mindestbreite in dieser prozentualen Breite einschränken. Wenn der Benutzer das Fenster auf einen bestimmten Wert schrumpft, wird das Fenster nicht erneut skaliert.
Freunde, die mit CSS vertraut sind, wissen, dass es vier solche Attribute gibt:
Diese vier Attribute können dieses Problem einfach lösen. Sind Sie glücklich? Aber sei nicht beschäftigt. Obwohl sie dieses Problem lösen können, gibt es ein ernstes Problem. Der Browser IE6, der von Benutzern am häufigsten verwendet wird, unterstützt diese Attribute nicht. Das ist eine sehr schlechte Sache. Wir können den Browser nicht mit den meisten Benutzern verwerfen!
Es gibt vier beliebte Methoden im Internet, um das Problem zu lösen, das IE6 diese vier Attribute unterstützt:
Die ersten drei haben Nachteile. Bitte wählen Sie die am besten geeignete Methode. Ich bevorzuge den letzten. Dies wird durch einen großen Ausländer erreicht. Die relevanten Beispiele finden Sie hier: http://www.doxdesk.com/software/js/minmax.html
Mit dieser JS -Datei müssen Sie diese JS -Datei nur im Header aufrufen.
PS: Aus Gründen der Bequemlichkeit im Demonstrationsmodell nenne ich diese JS als interne Referenz. In der tatsächlichen Anwendung erstellen Sie diese JS -Datei in eine externe JS -Datei und rufen Sie sie wie folgt auf:
<script type = text/javaScript src = minmax.js> </script>
Wir wenden einfach Minwidth auf die beiden Container #Wrapper und #Foterer im Stilblatt an und setzen ihre Breite auf 100%. OK. Jetzt haben wir das Problem der minimalen Breite gelöst.