Zagnieżdżanie reguł @media w CSS

Question

Jul 31, 2012, 08:23 PM

css css3 media-queries

Zagnieżdżanie reguł @media w CSS

Wsparcie wydaje się być różne w różnych przeglądarkach.

Sprawdźpołączyć

Firefox: czarny z białym tekstem.

Opera, Chrome, IE9: niebieski z czarnym tekstem.

Co jest poprawne i jak je ujednolicę?

Kod

@media screen and (min-width: 480px) {

    body{
        background-color:#6aa6cc;
        color:#000;    
    }

    @media screen and (min-width: 768px) {

        body{
            background-color:#000;
            color:#fff;    
        }
    }
}

Co ciekawe, wydaje się, że zagnieżdżanie zapytań medialnych w warunkowym@import wydaje się działać.

na przykład:

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Media test</title>
    <link rel="stylesheet" type="text/css" href="importer.css" />
</head>
<body>
    <h1>Why is this not consistent.</h1>
</body>
</html>

importer.css

@import url(media.css) screen and (min-width: 480px);

media.css

body {
    background-color: #6aa6cc;
    color: #000;
}

@media screen and (min-width:768px) {
    body {
        background-color: #000;
        color: #fff;
    }
}