CSS媒体查询不起作用

你好我已经创建了一个网站，3个星期前媒体查询和一切正常，我休息一下。现在，我再次测试该网站的媒体查询不起作用（是的，它只是吓坏了）。CSS媒体查询不起作用

这里是我的媒体查询：

/* Media Queries */ 

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

    #ad-container, #ad, #adnum, #adnums, #adStxt, #footer { 
     display: none; 
    } 

    #adtxtspecial { 
    display: block; 
    } 

    #content { 
    padding-left: 0px; 
    } 

    #project-logo { 
    display: none; 
    } 
} 

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

    #header { 
     height: 100px; 
    } 
}

在文档的头部，我得到这个：

<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width = device-width;">

请尽快更多钞票回答。

编辑：这些是我需要改变的元素的原始风格。

#ad-container { 
    text-align: center; 
} 

#ad { 
    width: 900px; 
    height: 500px; 
    margin-right: auto; 
    margin-left: auto; 
    display: block; 
} 

#adnums { 
    padding: 2px; 
    background-color: #f7f6f5; 
    cursor: pointer; 
} 

#adnum { 
    color: #dd4814; 
    font-weight: bold; 
} 

#adStxt { 
    font-size: small; 
} 

#adtxtspecial { 
    display: none; 
    text-align: center; 
    font-size: 40px; 
    color: #dd4814; 
    font-weight: bold; 
    padding-top: 100px; 
    padding-left: 10px; 
    padding-right: 10px; 
}

来源

2013-07-21 S8A

你能告诉我什么不工作吗？ –

“不工作”并不是一个非常具体的解释。 – Horen

@ yotam-omer更具体地说，当我调整窗口的大小时，一些对象应该消失（display：none）并且应该出现其他对象（display：block）。但是没有发生。 – S8A

我能想到的问题是您正在使用内联样式。内联样式将覆盖CSS部分/文件中的样式属性。

here's an example

我加入这个CSS：你不应该使用2个不同元素的ID相同，但对于例如它的工作原理，并演示了该问题

#content{ 
    padding-left:50px; 
}

注意。

来源

2013-07-21 16:37:10

其实我没有使用内联样式 – S8A

好，但我仍然没有看到任何问题。当我调整窗口大小并使用代码时，元素消失。 –

更好的做法是使用类为这种事情。看看是否将他们改为课堂可以纠正问题。

来源

2013-07-21 17:42:08

好吧，我刚刚发现，它不能在本地工作，但是当我在localhost中打开它的工作原理！我仍然不明白为什么地狱它不能在本地工作，但至少它工作。 – S8A

CSS媒体查询不起作用

回答

相关问题