0

我有这种 CSS 样式，我试图在 chrome v28、Firefox v222 和 IE8 上运行：

html, body{
            margin: 36px;
            width: 100%;
            background-color: black;
        }

        @media screen and (max-width: 768px){
            html, body{
                width: 100%;
                height: 100%;
            }

            #page {
                margin: 20px;
                width: 100%;
                background-color: red;
            }
        }

作为标记，我添加：

<!DOCTYPE html>
<html>
<head></head>
<body><div id="page"></div></body>
</html>

只是想了解如果我最小化窗口，为什么它不会将颜色变为红色。

任何帮助都会有很大的帮助。

谢谢拉贾

4

1 回答 1

1

#page没有内容因此它有height:0px;尝试以下操作：（工作jsFiddle）

@media screen and (max-width: 768px){
    html, body{
        width: 100%;
        height: 100%;
    }

    #page {
        margin: 20px;
        width: 100%;
        height:100%; /* set the height */
        background-color: red;
    }
}

至于问题的补充——改变背景——你必须像这样颠倒 CSS 的顺序：

<style> 

html, body{ 
    margin: 36px; width: 100%; height: 100%; 
} 
body{ background-color: black; } /* This should be first for the media query to override */

@media screen and (max-width: 768px){ 
    html, body{ margin: 20x; } 
    body{ background-color: red; } /* When the media query is applied this overrides the previous rule */
} 

</style>
于 2013-07-28T17:31:49.390 回答