Question

首先，容器的width 80％，当media query更改为width时 992px 它没有改变但是当为同一媒体查询指定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;
}

媒体查询不会覆盖它。我测试了你的代码，用前一行的宽度替换max-width，或者在媒体查询中使用max-width：90％。那就行了。

干杯。

Answer 2

因为您的旧代码未被新代码替换

使用！重要的新代码

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

Answer 3

width和max-width是不同的属性。如果您要停用max-width，则必须将其覆盖为none的初始值，因此width将是唯一会影响元素宽度的属性。

.container {
    max-width: none;
}

参考：MDN - max-width

宽度在媒体查询中不会更改其余属性更改

3 个答案: