在CSS中嵌套@media规则

各种浏览器的支持似乎有所不同。

Firefox：黑色，带白色文字。

Opera，Chrome，IE9：蓝色与黑色文本。

哪个是正确的，我将如何使其保持一致？

代码

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

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

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

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

有趣的是，似乎在条件内嵌套媒体查询@import似乎有效。

例如：

的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;
    }}

忽然笑

浏览 529回答 1

1回答

随时随地看视频慕课网APP