• Thema

  • Technologie

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.

Noch mehr finden:

  • Thema

  • Technologie

Beitrag teilen
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email
Share on xing
Was denkst du dazu?
yeah!
0%
wooow
0%
what?
0%
meh.
0%
hahaha
0%
Diskussion

Schreibe einen Kommentar

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

 

Newsletter abonnieren

Noch mehr finden:

  • Thema

  • Technologie