Wenn die Auflösung, also die Breite und Höhe des Displays in Pixel, bekannt ist, und Sie das Layout nur für dieses eine Display entwerfen müssen, dann können Sie alle Angaben im Layout in Pixel vornehmen. Weil dieses Layout unveränderlich ist, spricht man von einem fixen Layout. Die Grafik oben zeigt ein fixes Layout, das an einen Viewport für einen großen Monitor (orange) angepasst wurde. Bei kleineren Viewport (hellblau) wird ein Teil des Layouts abgeschnitten und links bleibt ein Rand. Oft ist ein fixes Layout wegen der (zu) unterschiedlichen Endgeräte nicht sinnvoll.

Wenn Sie ein Gefäß füllen, dann breitet sich die Flüssigkeit gleichmäßig aus. Fließende Layouts werden dadurch erreicht, dass relative Einheiten (z. B. in %) verwendet werden. Diese Angaben beziehen sich auf die Abmessungen des Viewports, passen sich also automatisch an Veränderungen an. Die Grafik oben zeigt ein Layout, das in der Höhe fix und in der Breite fluid ist. Hierdurch wird erreicht, dass das Layout trotz unterschiedlicher Breite immer komplett sichtbar bleibt. Theoretisch könnte das Layout auch in vertikaler Richtung fluid gestaltet werden. Dies ist allerdings unüblich und wird selten umgesetzt.

Ein adaptives Layout (Adaption, dt.: Anpassung) passt sich an den Viewport nicht durch stufenlose Vergrößerung oder Verkleinerung an, sondern durch Veränderung der einzelnen Blöcke im Layout. Die Grafik oben illustriert dies: Bei kleinerem Viewport werden die Blöcke kleiner und/oder verschieben sich. Dies wird technisch erreicht, indem sogenannte Breakpoints (Breitenangaben in Pixel) definiert werden, ab denen sich das Layout (schlagartig) verändert. Auf diese Weise kann beispielsweise auch auf die Drehung des Tablets oder Smartphones reagiert werden.

Wie so oft liegt die optimale Lösung irgendwo dazwischen! Responsive(response, dt.: Antwort) Layouts kombinieren fluide, adaptive und fixe Layouts, stellen also eine Mischform aller beschriebenen Layoutformen dar. Die Grafik oben veranschaulicht dies: Bei großen Monitoren sind zunächst links und rechts Ränder sichtbar. Bei einer Verkleinerung des Viewports werden vorerst nur diese Ränder schmäler. Das Layout bleibt also bis zu einer definierten Breite des Viewports unveränderlich (fix). Wird weiter verkleinert passt sich das Layout zunächst fluid an den Viewport an. Ab einer gewissen Größe (Breakpoint) springt das Layout um – im Beispiel wird eine Spalte umgebrochen.