Als es durch die Einführung von Cascading Style Sheets endlich möglich war, ansprechendere Layouts umzusetzen, kam der Wunsch auf, Webseiten mit einem festen Gestaltungsraster zu versehen. Dabei wurde dann festgelegt, dass der Haupt-Inhaltsbereich eine feste Breite von z.B. 960 Pixeln hatte – ganz egal, wie groß das Display des Webseitenbesuchers war. Sah alles schick aus, bis dann die ersten mobilen Endgeräte – Smartphones, Tablets – aufkamen. Um nicht mit dem Finger hektisch über den Bildschirm zu wischen, um auf einem 360 Pixel breitem Display den Inhalt einer 960 Pixel breiten Webseite anzusehen, tauschte man feste Abmessungen in prozentuale Angaben, z.B. statt einem Abstand links von 20 Pixeln also einen Abstand links von 5% der Display-Breite. Damit passt sich das Layout der Website dann der tatsächlichen Größe des Browserfensters an und reagiert auch auf Änderungen der Bilschirmgröße (z.B. wenn du das Browserfenster verkleinerst/vergrößerst), wenn der Inhalt bereits angezeigt wird. Der neudeutsche Begriff dafür ist responsive, wobei wir hier auch die Frage einbeziehen, wie sich z.B. ein Navigationsmenü auf kleinen Bildschirmen benutzerfreundlich darstellen lässt. Eine Verkleinerung des Menüs würde irgendwann bedeuten, dass die Menüeinträge nur noch mit einem Bleistiftspitze ausgewählt werden können. Ein Hamburger-Menü ist da wesentlich benutzerfreundlicher.
Das Theme Twenty Twenty One ist (wie eigentlich alle Themes, die so ab 2015 entstanden sind) selbstverständlich responsive, ganz ohne weiteres Zutun. Du siehst das daran, dass ab einer Verkleinerung des Browserfensters unter 482px das Navigationsmenü mit einem Hamburger-Menü ersetzt wird.
