Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Wir haben uns von CSS zu den aktuellen Hauptkategorien entwickelt, die in den folgenden Kategorien zusammengefasst werden können. Die Ihnen bekannten Implementierungsmethoden können die spezifischen Implementierungen auf folgende Weise sein:
Statisches Layout
Adaptives Layout
Fließendes Layout (auch bekannt als Prozentlayout%)
Responsives Layout: Medienabfrage
Flexibles Layout (rem/em-Flex-Layout)
1. Statisches Layout
Am meisten Bei der herkömmlichen Layoutmethode werden alle Größen auf der Webseite in px angegeben und die Mindestbreite wird festgelegt. Wenn die Breite kleiner als diese Breite ist, wird eine Bildlaufleiste angezeigt zentriert werden und der Hintergrund hinzugefügt wird.
Implementierungsmethode:
PC: Zentriertes Layout, absolute Breite/Höhe (px) für alle Stile verwenden, ein Layout entwerfen, horizontale und vertikale Bildlaufleisten verwenden, um den verdeckten Teil anzuzeigen, wenn die Bildschirmbreite und -höhe angepasst werden;
Mobile Geräte:Erstellen Sie außerdem eine mobile Website, entwerfen Sie ein separates Layout und verwenden Sie unterschiedliche Domainnamen wie wap oder m.
Vorteile: Bei Verwendung der vorherigen CSS2-Layoutmethode ist das Layout einfach und es gibt keine Kompatibilitätsprobleme.
Nachteile: Es kann nicht vernünftig auf dem Mobiltelefon angezeigt werden. Die PC-Seite kann nicht auf dem Mobiltelefon verwendet werden. Sie müssen ein anderes Layout schreiben.
Übungsfall:
Float-Layout
Absolutes Layout
2. Adaptives Layout
kann als aus mehreren statischen Layouts unter verschiedenen Bildschirmen bestehend angesehen werden. Adaptives Layout definiert unterschiedliche Layouts für unterschiedliche Bildschirmauflösungen. Durch Ändern der Bildschirmauflösung kann zwischen verschiedenen statischen Layouts gewechselt werden (die Position von Seitenelementen kann sich ändern), aber in jedem statischen Layout ändern sich die Seitenelemente nicht, wenn die Fenstergröße angepasst wird. Adaptives LayoutDie Position der Elemente auf der Seite ändert sich, wodurch der Nachteil der geringen Ausnutzung großer Bildschirmfläche im fließenden Layout effektiv behoben wird.
Wenn sich die Bildschirmauflösung ändert, ändert sich die Position der Elemente auf der Seite, nicht jedoch die Größe.
Verwenden Sie Prozentsätze für die Größe der unterteilten Hauptbereiche auf der Webseite
(mit min -*, das Attribut max-* wird verwendet, um das Layoutformat für verschiedene Bildschirme festzulegen. Wenn sich die Bildschirmgröße ändert, werden unterschiedliche Layouts angezeigt, was bedeutet, dass sich der Elementblock auf diesem Bildschirm an dieser Stelle befindet, aber auf diesem Bildschirm , der Elementblock wird an dieser Stelle wieder angezeigt. Lediglich das Layout ändert sich, die Elemente bleiben unverändert. Es besteht aus mehreren statischen Layouts auf verschiedenen Bildschirmen.
Das Merkmal des Fluid-Layouts besteht darin, dass sich das Layout der Seite nicht wesentlich ändert und angepasst und angepasst werden kann. Dies ergänzt lediglich das adaptive Layout. Verwenden Sie %-Prozentsätze, um die Breite zu definieren, und die Höhe ist größtenteils in px festgelegt. Sie kann entsprechend der Echtzeitgröße des visuellen Bereichs (Ansichtsfenster) und des übergeordneten Elements angepasst werden, um sie so weit wie möglich an verschiedene Auflösungen anzupassen . Eigenschaften wie max-width/min-width werden häufig verwendet, um den Größenflussbereich zu steuern, um zu vermeiden, dass er zu groß oder zu klein ist und die Lesbarkeit beeinträchtigt. Diese Layoutmethode wurde in der frühen Geschichte der Web-Frontend-Entwicklung verwendet, um PC-Bildschirme unterschiedlicher Größe zu bewältigen (der Unterschied in der Bildschirmgröße war damals nicht allzu groß). Es ist auch heute eine häufig verwendete Layoutmethode mobile Entwicklung, aber Offensichtliche Nachteile: Das Hauptproblem besteht darin, dass bei einer zu großen Bildschirmgröße die Anzeige auf einem Bildschirm, der im Vergleich zum ursprünglichen Design zu klein oder zu groß ist, nicht richtig angezeigt wird. Da die Breite in % definiert wird, die Höhe und die Textgröße jedoch größtenteils in px festgelegt sind, besteht der Anzeigeeffekt auf einem Mobiltelefon mit großem Bildschirm darin, dass die Breite einiger Seitenelemente sehr lang gestreckt wird, die Höhe und die Textgröße jedoch nicht sind immer noch die gleichen wie die Originale (das heißt, diese Dinge können nicht „fließend“ werden
Wenn sich die Bildschirmauflösung ändert, ändert sich die Größe der Elemente auf der Seite, aber das Layout ändert sich nicht.
Main Übungsfälle:
Fest links + rechts Adaptiv
Feste Breite links und rechts + adaptiv in der Mitte
Holy Grail-Layout
Doppeltes Nurflügler-Layout
4. Responsives Layout
Durch Responsive Design kann die Website auf Mobiltelefonen und Tablets besser durchsucht und gelesen werden. Unterschiedliche Bildschirmgrößen führen dazu, dass den Benutzern unterschiedliche Webseiteninhalte angezeigt werden. Mit der Medienabfrage können Sie die Größe des Bildschirms erkennen (hauptsächlich die Breite) und unterschiedliche CSS-Stile festlegen, um ein reaktionsfähiges Layout zu erreichen. Verlässt sich hauptsächlich auf CSS-Medienabfragen.
Für jede Bildschirmauflösung gibt es einen Layoutstil, d. h. die Position und Größe der Elemente ändert sich.
Praktische Case-Medienabfrage
5. Flexibles Layout
rem/em
Flex-Layout
Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !
Das obige ist der detaillierte Inhalt vonWas sind die CSS-Layoutmethoden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
