CSS媒体查询问题

Question

我在使用CSS媒体查询时遇到了麻烦。

它无法识别我要求查询的代码行。

我不知道该怎么做，我看到我的CSS，它看起来不错，不应该是一个问题，但是......

有人有这个问题吗？

我的代码中有什么问题吗？

这是我的CSS代码：

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

     .container {
      font-family:'Open Sans Condensed', sans-serif;
      width: 100%;
      margin: 0 auto;
      position: relative;
      overflow: auto;
     background-color: #fff; 
    }    
    }

    body{
        margin:0;
        padding: 0px;
        background-color: rgba(228,227,227,1);

    }

    .container{
        width: 800px;
        height: auto;
        clear: both;
        margin: 40px auto;
        overflow: auto;
        background-color: #fff; 
    }

Answer 1

查看您的代码我认为您的问题是有序的问题。您在非媒体查询样式之前调用媒体查询，因此您在该媒体查询中设置的任何内容都被覆盖，以下是媒体查询覆盖非媒体查询样式所需的方式。

body{
    margin:0;
    padding: 0px;
    background-color: rgba(228,227,227,1);
}
.container{
    width: 800px;
    height: auto;
    clear: both;
    margin: 40px auto;
    overflow: auto;
    background-color: #fff; 
}
@media screen and (max-width: 600px) {
     .container {
          font-family:'Open Sans Condensed', sans-serif;
          width: 100%;
          margin: 0 auto;
          position: relative;
          overflow: auto;
          background-color: #fff; 
    }    
}