Startseite Skripte für das Wintersemester 2018/19 Webdesign Positionieren, Media Queries, CSS-Variablen Media Query: Breite abfragen


Media Query: Breite abfragen

In its essence a media query consists of a media type and an expression to check for certain conditions of a particular media feature. The most commonly used media feature is width.

Online-Demo

Demo – ändert die Breite Eures Browserfensters!

CSS

/* normale Einstellung */
body {
    background: #fff;
    color: #444;
}

/* wenn Screen breiter als 500px wird: */
@media only screen and (min-width: 500px){
    body {
        background: red;
    }
}

/* wenn Screen breiter als 800px wird: */
@media only screen and (min-width: 800px){
    body {
        background: blue;
    }
}

CodePen

See the Pen media-query-breite-abfragen by Matthias Edler-Golla (@megolla) on CodePen.