Responsive Design

Damit Stud.IP auch für Endgeräte mit kleinen Bildschirmgrößen verwendbar sein kann, werden ein paar "media queries" verwendet, um sinnvolle "breakpoints" für Layout und GUI zu Verfügung zu stellen. Diese "breakpoints" unterscheiden sich nur in der minimalen Breite des "viewports", also die Breite des virtuellen Fensters, in das der (mobile) Browser die Seite hineinrendert. Abhängig von dieser Breite können Elemente passend skaliert oder überhaupt gezeigt bzw. versteckt werden.

In Stud.IPs LESS/CSS werden die folgenden "media query"-Intervalle verwendet:

Damit man diese "media queries" im LESS-Code leichter schreiben kann, gibt es dort spezielle Mixins, die einem helfen, responsive Regel zu schreiben:

Es können auch "media queries" verwendet werden, die in die andere Richtung (also kleiner als eine bestimmte Größe) gehen:

Auch hier gibt es wieder LESS-Mixins:

lorem ipsum

.hidden-tiny-up .hidden-small-up .hidden-medium-up .hidden-large-up

.hidden-tiny-down .hidden-small-down .hidden-medium-down .hidden-large-down