Mit MediaQueries kann das Layout auf bestimmte Ausgabemedien abgestimmt werden (Bildschirm, Drucker).
Aber auch die größe des Bildschirms kann abgefragt werden und so für unterschiedliche gorße Bildschirme
das Layout angepasst werden.
Häufig werden Sie Media Queries dafür verwenden wollen, um auf verschiedene Breiten der Ausgabebildschirme reagieren zu können. Damit die Webseite sowohl in einem schmalen Browserfenster des Desktop-PCs als auch auf dem Smartphone oder Laptop wunschgemäß dargestellt wird, müssen Sie mithilfe eines meta-Elements dafür sorgen, dass sich die Seite an den Viewport anpasst. Notieren Sie dazu folgende Zeile im head der Seite:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Verwendet um die größe von Bildern anzupassen, aber auch um das Layout zu bestimmen. Das Präfix min-width bedeutet, dass der Viewport mindestens Diese breite haben muss. werden mehrer mediaQueries angegeben, muss mit dem kleintsten Viewport begonnen werden.
@media (min-width: 40em)
{
.bild
{
width: 75%;
float: left;
margin-right: 1em;
padding: .5em;
}
}
@media (min-width: 50em)
{
.bild
{
width: 50%;
float: left;
margin-right: 1em;
padding: .5em;
}
}
@media (min-width: 80em)
{
.bild
{
width: 35%;
float: left;
margin-right: 1em;
padding: .5em;
}