css - 宽度在媒体查询中不会改变，其余属性会改变

Question

首先，容器 被赋予80% 的宽度，当它被媒体查询改变时> 对于 992px 的 width 它不会改变，但是当为相同的媒体查询指定 background-color 时它会改变。JSfiddle-https://jsfiddle.net/q4hqq2ro/

---

HTML

<div class="container">
        <header>
            <div class="logo"></div>
            <h1 > <span class="light">Spirituality</span> Forums</h1>
            <div class="register user">Register</div>
            <div class="login user">Login</div>
            <span class="close">X</span>
            <div class="search-icon"><a href=""></a></div>
            <input type="search" class="search">
            <div class="clear"></div>
        </header>

        <div class="advertisment">
        </div>
        </div> <!-- container -->

---

CSS

    @import url(http://fonts.googleapis.com/css?family=Niconne);

    body{
        background: #e6e3d7;
        font-size: 16px;
    }

    /*-----------------Header----------------------*/


    .container{
        max-width: 80%;
        margin:0 auto;
    }

    header{
        background-color: #b47941;
        padding-left: 1%;
        margin: 0 auto;
        display: block;
    }

    .logo{
        background: url("images/small.jpg") no-repeat;
        width: 150px;
        height:90px;
        float: left;
    }

    header h1 {
        display: inline-block;
        font:200% cursive ;
        color: white;
        line-height: 90px;
        margin-left: 2%;
        color: #daccb7;
        z-index: 2;
    }

    .light{
        color: #f5f3ea;
    }

    .clear{
        clear: both;
        display: inline-block;
    }

    /*---------------register-------------*/

    .register{
        margin-left: 2%;
        margin-right: 2%;
    }

    .user{
        display: inline-block;
        float: right;
        color: white;
        margin-top: 62px;
        background: #e6e3d7;
        width:10%;
        font: 100%/160% arial;
        text-align: center;
        color: #a35800;
        line-height: 187%;
        cursor: pointer;
    }

    /*---------------search-------------*/
    .search{
        display: none;
        position: absolute;
        margin-top: 64px;
        right: 30%;
        width: 18%;
        height: 26px;
    }

    .close{
        color: grey;
        position: absolute;
        top: 68px;
        right: 30%;
        display: none;
        z-index: 2;
        cursor: pointer;
        background: #e6e3d7;
        width: 2%;
    }

    input[type="search"]{
        border: 0;
        color: #a35800;
        background: #e6e3d7;
        padding: .5%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;  
        box-sizing: border-box;
        font-size: 100%;
    }

    .search-icon{
        background:url("images/search.gif") no-repeat;
        width:32px;
        height:23px;
        display: inline-block;
        float: right;
        margin-right: 2%;
        margin-top: 66.5px;
        cursor: pointer;
    }

    /*-----------advertisment------------*/

    .advertisment{
        height: 320px;
    }

    /*-----------Media Queries----------*/

     @media (max-width : 992px) {

        .container {
            width: 90%;
            background: green;
        }

    }

Answer 1

问题是你之前设置的:

.container{
  max-width: 80%;
  margin:0 auto;
}

并且媒体查询不会覆盖它。我测试了您的代码，将上一行中的最大宽度替换为宽度，或者在媒体查询中使用最大宽度:90%。这样就可以了。

干杯。