Question

我有这种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>

我想了解为什么在最小化窗口的情况下不会将颜色变为红色。

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

由于拉加

Answer 1

#page没有内容因此它有height:0px;请尝试以下操作：（working 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>

CSS媒体类型和查询无效

1 个答案: