Lernen im Nusshof

Mit Multi Column lassen sich Inhalte je nach Bildschirmgrösse in mehr oder weniger Spalten anzeigen. Du solltest diese Seite unbedingt mit dem Smartphone UND einem grossen Bildschirm öffnen - und im grossen die Fenstergrösse verändern. Mit Multi Columns sind responsive Layouts ohne Media Queries* möglich. Im vorliegenden Beispiel habe ich maximal 2 Columns im horizontalen Abstand von 4rem mit je einer maximalen Breite von 360px definiert. Am oberen Fensterrand habe ich einen div container mit einem Gradient eingeschrieben (siehe den Quelltext dieser Seite).

*Mit Medienabfragen (Media Queries) kann die Darstellung eines Dokuments für verschiedene Ausgabemedien festgelegt werden. Dabei wird nicht ermittelt, um welchen Browser es sich handelt, sondern welcher Medientyp (z.B. Bildschirm oder Drucker), oder Medienmerkmal (z.B. Farbfähigkeit) oder einer Kombination aus beidem der Browser vorfindet. Erfüllt das verwendete Ausgabemedium alle Kriterien einer Medienabfrage, so wird die damit verknüpfte CSS-Ressource eingebunden.

Das, was du hier in dieser Webseite siehst, ist die Interpretation der Auszeichnungssprachen HTML (Hypertext Markup Language = maschinenlesbare, d.h. von Webbrowsern interpretierbare Auszeichnungssprache, welche ein über Links verbundenes Netz aus Text-, Bild- und Dateneinheiten ermöglicht, in welchem sich die Nutzer je nach Interesse bewegen können) und CSS (Cascading Style Sheet = CSS describes how HTML elements are to be displayed on screen, paper, or in other media. It can control the layout of multiple web pages all at once.