CSS für Responsivität: So schreibt man eine Media Query

Responsivität gehört heute zum Webdesign. Eine Website sollte immer tauglich sein für Mobile Geräte, Tablets und auch Desktop-Geräte. Da kann es vorkommen, dass man mit CSS nur ein bestimmtes Gerät ansteuern möchte. Das geht mit Media Queries.

Das Prinzip ist recht einfach, wenn man CSS schon etwas kennt. Es gibt einfach noch eine weitere Klammer um den Selektor und die Eigenschaften.
Zum Beispiel so:

@media only screen and (max-width: 600px) {
  p {
    font-size: 15px;
  }
}

Das bedeutet: Auf Geräten, die eine maximale Breite von 600 Pixel haben, ist der Lauftext (Paragraph) 15 Pixel gross.

Diese maximalen, respektive minimalen Breiten nennt man «Breakpoints».

Gängige Breakpoints

Wir arbeiten meistens mit folgenden Breakpoints. Rein theoretisch kannst du aber unzählig viele Breakpoints definieren und selber wählen.

Smartphones

@media only screen and (max-width: 640px) {...}

Tablets

@media only screen and (max-width: 768px) {...}

Grösser als Tablets (Laptops und Desktops

@media only screen and (min-width: 992px) {...}

Weitere Verwendungen von Media Queries

Media Queries können auch auf der Ausrichtung eines Geräts basieren (also Porträt oder Quer):

@media only screen and (orientation: landscape) {...}

CSS kann aber auch definieren, wie etwas aussieht in der Print-Version:

@media print {...}

Wann verwendest du Media Queries am häufigsten? Ich freue mich über deinen Kommentar.


Keine Beiträge verpassen?


War dieser Artikel hilfreich?
Please wait...
Fragen oder Anregungen?
Zu den Kommentaren ( 0 )
Passende Themen
Kommentare (0)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.