Startseite Skripte für das Wintersemester 2018/19 Webdesign Positionieren, Media Queries, CSS-Variablen Einbinden von Media Queries

Einbinden von Media Queries

Man kann Media Queries entweder direkt in einem Stylesheet verzweigen oder aber mehrere Stylesheets verwenden.

Media Queries direkt im Stylesheet

das kann schnell unübersichtlich werden …

CSS

/* normale CSS-Anweisung */
main {
    width: 95%;
    margin:2% auto;
}

/* anweisung, wenn das Browserfenster >= 480px ist */
@media only screen and (min-width: 480px) {
    main {
        width: 80%;
    }
}

Mehrere Stylesheets

das kann übersichtlicher sein – bedeutet aber bei umfangreichen Website eine leichte Verzögerung beim Laden der Seiten, weil mehrere „Server Request“ durchgeführt werden müssen …

HTML

<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Media Queries</title>

    <!-- Standard-Stylesheet -->
    <link rel="stylesheet" href="c/style.css" />

    <!-- Stylesheet ab einer Browserbreite von 480px -->
    <link rel="stylesheet" media="screen and (min-width: 480px)" href="c/mittel.css" />

    <!-- Stylesheet ab einer Browserbreite von 768px -->
    <link rel="stylesheet" media="screen and (min-width: 768px)" href="c/breit.css" />

</head>

Achtung

Schreibt in die Stylesheets „mittel.css“ usw. nur die Anweisungen, in denen sich die Seite von den Anweisungen in „style.css“ unterscheiden! Was nicht extra erwähnt wird, vererbt sich vom „style.css“ …

→ Begriff suchen