HowToResponsiveDesign

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:

/* tiny: kleine Smartphones (im Hochformat) mit einer Breite von weniger als 576px. */

/* small: Smartphones (im Querformat) mit einer Breite von 576px oder mehr */
@media (min-width: 576px) { … }

/* medium: z.B. Tablets mit einer Breite von 768px oder mehr */
@media (min-width: 768px) { … }

/* large: Desktops ab einer Breite von 1200px oder mehr */
@media (min-width: 1200px) { … }
 

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

.media-breakpoint-tiny-up({});
.media-breakpoint-small-up({});
.media-breakpoint-medium-up({});
.media-breakpoint-large-up({});

/* Beispiel für die Nutzung: */

.calhead label {
  cursor: pointer;
  &:hover {
    color: @base-color-40;
  }

  .media-breakpoint-small-down({
    .button();
  });
}

/* oder auch: */
.media-breakpoint-tiny-down({
     #barTopStudip img {
         height: 33px;
         margin-top: 5px;
    }
});

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

/* tiny: kleine Smartphones (im Hochformat) mit einer Breite von weniger als 576px. */
@media (max-width: 575px) { … }

/* small: Smartphones (im Querformat) mit einer Breite kleiner als 768px */
@media (max-width: 767px) { … }

/* medium: z.B. Tablets mit einer Breite kleiner als 1200px */
@media (max-width: 1199px) { … }

/* large: Desktops ab einer Breite von 1200px oder mehr */
/* braucht man nicht, da es ja keine obere Grenze gibt */

Auch hier gibt es wieder LESS-Mixins:

.media-breakpoint-tiny-down({});
.media-breakpoint-small-down({});
.media-breakpoint-medium-down({});
.media-breakpoint-large-down({});

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

Letzte Änderung am December 20, 2016, at 06:56 PM von mlunzena.