Viewports in themeless

Mit Viewports (Media Queries im CSS-Zusammenhang) lassen sich variable Elemente erstellen, die auf dem Desktop anders als auf dem Smartphone definiert sind. Ziel ist es, das Screendesign auf allen Endgeräten möglichst optimal auszugeben.

In der SCSS-Datei files/themeless/assets/scss/variables.scss findest du die alle voreingestellten Viewports:

$container-size: 1200px;
$width-table: 1000px;
$width-smartphone: 800px;

Diese Variablen werden von vielen verschieden Modulen abgefragt und interpretiert. Nicht zuletzt lässt sich dadurch das Grid-System anpassen.