Media Queries
Einsatz
Media Queries werden eingesetzt, um Änderungen in der Darstellung mittels CSS vorzunehmen in Abhängigkeit vom Ausgabemedium.
Beispiel
#home {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
#home .claim h1 {
font-size: 3em;
margin-bottom: 20px;
}
#home .claim p {
font-size: 1.75em;
}
@media (min-width: 600px) {
#home {
display: block;
text-align: left;
}
#home .claim h1 {
font-size: 6em;
margin-bottom: 40px;
}
#home .claim p {
font-size: 3.5em;
}
}
Mobile first!
Mobile First bedeutet, dass mit Design und Coding bei einem schmalen Bildschirm begonnen wird und von dort aus bis zu Desktoprechnern skaliert wird.
Im Coding bedeutet das, dass zuerst die Styles für mobile devices geschrieben werden (ohne @media) und diese dann in Abhängigkeit von ihrer min-width überschrieben werden.