CSS Media Query

Mit Media Query kann das Seitelyout automatisch an die Bildschirmgröße angepasst werden, damit kann eine Seite für Mobil und Desktop optimiert werden. Sprich mit Media Query kann das Layout an den Bildschirm angepasst werden. Die wichtigsten Parameter sind min-width und max-width.

min-width

Mit min-width kann das CSS bei einer mindestbreite geändert werden.

 body {
        background-color: white;
}
@media screen and (min-width: 480px) {
    body {
        background-color: black;
    }
}

Demo öffnen

max-width

Mit max-width kann bis zu einer Maximalgröße CSS Eigenschaften ausgespielt werden.

 body {
        background-color: white;
}
@media screen and (max-width: 480px) {
    body {
        background-color: black;
    }
}

Demo öffnen

beide kombinieren

Mit and können beide Eigenschaften kombiniert werden.

 body {
        background-color: white;
}
@media (min-width: 0px) and (max-width: 400px){
    body {
        background-color: #021ffd;
    }
}
@media (min-width: 400px) and (max-width: 600px){
    body {
        background-color: #fd0202;
    }
}

Demo öffnen