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.
