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

CSS 媒体查询问题

Issue with CSS media queries

html

css

media-queries