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个不同元素，但是对于该示例，它可以工作并且它可以证明问题。

Answer 2

更好的做法是使用类来做这种事情。看看是否将它们改为课程可以解决问题。

CSS媒体查询不起作用

2 个答案: