CSS媒体类型和查询不起作用_Css_Media Queries

CSS媒体类型和查询不起作用

css

CSS媒体类型和查询不起作用,css,media-queries,Css,Media Queries,我正在尝试在chrome v28、Firefox v222和IE8上运行这种CSS样式： html, body{ margin: 36px; width: 100%; background-color: black; } @media screen and (max-width: 768px){ html, body{ width: 1

我正在尝试在chrome v28、Firefox v222和IE8上运行这种CSS样式：

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>

我只是想知道，如果我最小化窗口，为什么它不会变为红色

任何帮助都是巨大的帮助

谢谢拉贾

#页面

没有内容，因此它的高度为：0px尝试以下操作：（）

@媒体屏幕和（最大宽度：768px）{
html，正文{
宽度：100%；
身高：100%；
}
#页面{
利润率：20px；
宽度：100%；
高度：100%；/*设置高度*/
背景色：红色；
}
}

至于问题的补充——改变背景——你必须颠倒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>


html，正文{
边缘：36px；宽度：100%；高度：100%；
} 
body{background color:black；}/*这应该是媒体查询覆盖的第一个*/
@媒体屏幕和（最大宽度：768px）{
html，正文{margin:20x；}
body{background color:red；}/*当应用媒体查询时，这将覆盖前面的规则*/
}

将此“@介质屏幕和（最大宽度：768px）”更改为此“@介质（最大宽度：768px）”，谢谢。那确实有效。但是，如果我删除div并希望根据媒体查询更改主体的背景色，该怎么办。比如：

@media screen和（最大宽度：768px）{html，body{margin:20x；}body{background color:red；}}html，body{margin:36px；宽度：100%；高度：100%；}body{background color:black；}

@RAJAMALIK更新了新的要求