Fluid Layout Definition

Was ist Fluid Layout?

Ein fließendes Layout ist eine Art von Webseite, bei der sich das Layout der Seite ändert, wenn die Fenstergröße verändert wird. Dies wird dadurch erreicht, dass Bereiche der Seite mit Prozentwerten statt mit festen Pixelbreiten definiert werden.

Die meisten Webseiten-Layouts enthalten eine, zwei oder drei Spalten. In den Anfängen des Webdesigns, als die meisten Benutzer ähnliche Bildschirmgrößen hatten, wiesen Webentwickler den Spalten feste Breiten zu. Ein festes Layout kann zum Beispiel einen Hauptinhaltsbereich mit einer Breite von 960 Pixel und drei Spalten mit einer Breite von 180 Pixel, 600 Pixel und 180 Pixel umfassen. Während dieses Layout auf einem 1024×768-Bildschirm großartig aussieht, wirkt es auf einem 1920×1080-Bildschirm klein und würde nicht auf einen 800×600-Bildschirm passen.

Fließende Layouts lösen dieses Problem, indem sie Prozentwerte verwenden, um jeden Bereich des Layouts zu definieren. So kann ein Webentwickler beispielsweise ein Layout erstellen, das 80 % des Bildschirms ausfüllt, und die drei Spalten können jeweils 18 %, 64 % und 18 % einnehmen, anstatt einen Inhaltsbereich von 960 Pixel zu schaffen. Durch die Verwendung von Prozentsätzen kann der Inhalt erweitert oder verkleinert werden, damit er in das Fenster des Computers des Benutzers passt. Das CSS, das zur Erstellung eines festen Layouts im Vergleich zu einem fließenden Layout verwendet wird, ist unten dargestellt.

Festes Layout Fließendes Layout
. content { Breite: 960px; }
. left, . right { Breite: 180px; }
. middle { Breite: 600px; }
. content { Breite: 80%; }
. left, . right { Breite: 18%; }
. middle { Breite: 64%; }

Die CSS-Klassen in den Beispielen könnten jeweils einem div innerhalb des HTML einer Seite zugewiesen werden, wobei die Klassen .left, .right und .middle in der Klasse .content enthalten sind. Die Klasse .content kann auch einer Tabelle zugeordnet werden und die anderen Klassen können Tabellenzellen zugeordnet werden. Die .content-Klasse mit fester Breite benötigt keine definierte Breite, da sie automatisch die Breite der eingeschlossenen divs oder Tabellenzellen überspannt.

Fluid Layout vs. Responsive Design

Die Begriffe „Fluid Layout“ und “ responsive Webdesign“ werden manchmal austauschbar verwendet, sind aber zwei verschiedene Dinge. Eine Seite, die mit responsivem Webdesign erstellt wurde, enthält CSS-Medienabfragen, die je nach Breite des Fensters oder der Art des Geräts, mit dem die Seite aufgerufen wird, unterschiedliche Stile laden. Responsive Webdesign erfordert mehr CSS (und manchmal JavaScript) als ein einfaches fließendes Layout, aber es bietet auch mehr Kontrolle über das Layout der Seite.

Die Definition von Fluid Layout auf dieser Seite ist eine Originaldefinition von SharTec.eu.
Das Ziel von SharTec ist es, Computerterminologie so zu erklären, dass sie leicht zu verstehen ist. Wir bemühen uns bei jeder von uns veröffentlichten Definition um Einfachheit und Genauigkeit. Wenn Sie Feedback zur Flüssiges Layout-Definition haben oder einen neuen Fachbegriff vorschlagen möchten, kontaktieren Sie uns bitte.