CSS 媒体查询不起作用

Question

您好，我创建了一个网站，3 周前媒体查询和一切正常，我休息一下。现在我正在再次测试媒体查询不起作用的网站(是的，它只是搞砸了)。

这是我的媒体查询:

/* 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;
}

Answer 1

我能想到的问题是你用的是内联样式。内联样式会覆盖 CSS 部分/文件中的样式属性。

here's an example

我添加了这个 CSS:

#content{
    padding-left:50px;
}

请注意，您不应使用具有相同 ID 的 2 个不同元素，但对于该示例，它可以正常工作并演示了问题。