CSS-Styles für mobile Endgeräte anpassen

Die meisten Elemente, die auf den Uni-Webseiten verwendet werden, sind bereits genügend für die Ansicht auf mobilen Endgeräten angepasst.

In Einzelfällen kann es vorkommen, dass dies noch nicht geschehen ist. In diesem Fall wenden Sie sich gerne an die Web-Entwicklung (internet@uni-bielefeld.de) und weisen Sie uns auf diese Elemente hin.

CSS-Anpassungen selbst vornehmen

Desweiteren haben Sie eventuell eigene Elemente, die Sie gerne für die mobile Version optimieren möchten.
Hierfür kopieren Sie untenstehenden Quellcode, fügen ihn in Ihre eigene Style-Datei ein und passen Ihre Styles entsprechend der Displaygrößen an:

/* Small screen / tablet / 760px to 991px */
@media (max-width: 991px) {
  ...
}

/* Smaller screen / tablet+phone / 480px to 759px */
@media (max-width: 759px) {
  ...
}

/* Extra small screen / smartphone / 280px to 479px */
@media (max-width: 479px) {
  ...
}

Mobile Klassen

Sie haben zudem die Möglichkeit über die Klassen "mobile" und "no-mobile" Einfluss auf die Anzeige von Elementen auf mobilen Endgeräten zu nehmen.

mobile

Alle Elemente, welche die Klasse "mobile" besitzen, werden bis zu einer Bildschirmgröße von 991px mit display:block angezeigt.
Ab 992px werden diese Elemente mit display:none versteckt.

<div class="mobile">
  <p>Dieser Inhalt ist nur für mobile Endgeräte sichtbar.</p>
</div>

no-mobile

Alle Elemente, welche die Klasse "no-mobile" besitzen, werden bis zu einer Bildschirmgröße von 991px mit display:none versteckt.
Ab 992px werden diese Elemente mit display:block angezeigt.

<div class="no-mobile">
  <p>Dieser Inhalt ist nur für Bildschirme ab einer Größe von 992px sichtbar.</p>
</div>


In Kombination mit der Klasse "screenreader"

Sie können die Klassen "mobile" und "no-mobile" auch in Kombination mit "screenreader" verwenden. Für den Betrachter am Bildschirm oder mobilen Endgerät verändert sich dadurch nichts.
Für die Nutzer eines Screenreaders können Sie mit der Verwendung der Klasse "screenreader" jedoch sicher stellen, dass diese Inhalte dort ebenfalls zugänglich sind.

(Inhalte, die mit display:none ausgeblendet werden, sind auch für Screenreader nicht verfügbar)

<div class="mobile screenreader">
  <p>Dieser Inhalt ist für mobile Endgeräte und Screenreader sichtbar.</p>
</div>

Anwendungsbeispiel: Mobile Klassen

Wofür braucht man Mobile Klassen überhaupt?

Stellen Sie sich vor, Sie haben zwei längere Listen, die Sie in der Desktop-Version zwar übersichtlich nebeneinander platzieren können, die in der Mobil-Version jedoch untereinander dargestellt werden müssen.
Siehe: Webseite - Beratung & Service

Jemand, der sich nun diese Listen auf dem Smartphone anschaut oder von einem Screenreader vorgelesen bekommt, muss entweder viel scrollen oder sich viel anhören, bevor er oder sie am eigentlichen Ziel ist.

Mit Hilfe der Mobile-Klassen ist es möglich auf unterschiedliche Bildschirmgrößen einzugehen und zusätzliche Inhalte einzufügen oder auch gezielt Inhalte auszublenden.

Im eingangs genannten Anwendungsbeispiel können wir also in der Mobil-Version zusätzlich Skip-Links anzeigen lassen, die es dem Nutzer erleichtern auf der Seite zu navigieren.

Screenshots:


Zurück zum Styleguide