Html 为什么我的@media查询不起作用？_Html_Css

Html 为什么我的@media查询不起作用？

html css

Html 为什么我的@media查询不起作用？,html,css,Html,Css,我正在尝试使用媒体查询来改变我的网站在不同大小上的外观。。。目前它不起作用： html{background:333；} 正文{背景：F0F1F2；} html，正文{ 宽度：100%；最小高度：100%； } * { 保证金：0；填充：0；字体系列：'bl-reg'，无衬线；字体大小：12px；颜色：333； z-索引：继承； } h1，h2，h3，h4，h5，h6，p，a，li，tr，th，td{ -webkit触摸标注：无； -webkit用户选择：无； -khtml用户选择：

我正在尝试使用媒体查询来改变我的网站在不同大小上的外观。。。目前它不起作用：

html{background:333；} 正文{背景：F0F1F2；} html，正文{ 宽度：100%；最小高度：100%； } * { 保证金：0；填充：0；字体系列：'bl-reg'，无衬线；字体大小：12px；颜色：333； z-索引：继承； } h1，h2，h3，h4，h5，h6，p，a，li，tr，th，td{ -webkit触摸标注：无； -webkit用户选择：无； -khtml用户选择：无； -moz用户选择：无； -ms用户选择：无；用户选择：无；游标：默认值； } a{ 字体系列：'bl-reg'，无衬线；字体大小：继承；字体大小：继承；文字装饰：无；颜色：继承；光标：指针； } a:悬停{ 文字装饰：下划线； } .保证金中心{ 保证金：自动； } .向左拉{ 浮动：左； } .向右拉{ 浮动：对； } 导航条{ 高度：48px；溢出：自动；背景：FFF； } 导航条>ul{ 列表样式类型：无； } div.navbar>ul li.brand，导航栏上的导航链接{ 显示：内联块； } 分区导航栏>ul li.brand{ 字体大小：粗体；字体大小：14px； } 导航栏上的导航链接{ 字体大小：12px； } 导航栏>ul li a分区{ 显示：块；填充：15px； } 导航条>ul li.link a{ 显示：块；填充：16.5px15px；颜色：rgba51,51,51,0.75； } div.navbar>ul li.link a:悬停{ 颜色：rgba51,51,51,1； } 导航条>ul li a：悬停{ 文字装饰：无； } } @媒体屏幕和最小宽度：975px{ 导航条>ul{ 宽度：975px； } } @媒体屏幕和最大宽度：974px{ 导航条>ul{ 宽度：100%； } div.navbar>ul>div.collapse{ 位置：绝对位置；边缘顶部：48px； } } 欢迎

确保您声明您使用的是HTML5，并且具有视口的元标记

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    </head>
    <body>
    <p>jargin</p>
    </body>
    </html>

您是否在正文中使用display:none？如果您错误地使用了它，请将其从HTML代码中删除。

首先，您缺少了它

您正在应用显示：正文中无，请将其删除

媒体查询CSS

我已经更新了FIDDLE调整窗口大小以使媒体查询生效

请添加相关信息，如包含此导航栏的HTML片段以及您正在测试的浏览器。另外，您看到编辑器中的“代码片段”按钮了吗？尝试一下真的很有帮助@GolezTrol-更新，没有-我还没有看到代码片段按钮^；最近它似乎只在stackoverflow上流行。顺便说一句：你的标记是错误的。ul可能只包含li而不包含div。嗨，我添加了meta标签。它似乎允许位置：绝对和边距顶部工作，但不允许宽度？？

@media screen and (max-width: 974px) {

    html {
        background:yellow;
    }

}