html - 媒体查询在调整大小时不适用

Question

我有一个媒体查询问题。我想将容器的 width 属性更改为页面的 100%，但它不适用。我使用 bootstrap 作为 CSS 框架。我给你一个检查员的镜头:

代码:

<div class="container-flex" id="blog-posts">
    <div class="post-left">
        <div>
            <img class="img-responsive" src="images/content/blog/post-image.jpg">
        </div>
    </div>
    <div class="divider">
        <div class="divider-dot"></div>
        <div class="divider-line"></div>
    </div>
    <div class="post-right">
        <div>
            <time>10 April 2014</time>
            <h3>Typi non habent claritatem insitam</h3>
            <p>Duis autem vel eum iriure dolor in hendreit in vulputate velit esse molestie consequat vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui [...]</p>
        </div>
    </div>
</div>

CSS:

@media only screen and (max-width : 767px) {
    #blog-posts {
        display: flex;
        flex-direction: column;
        width: 100%;
        border: 1px solid blue;

        .divider {
            display: none;
        }

        .post-left {
            ;
            width: 100%;

            div {
                //width: 100%;
                border: 1px solid;
            }
        }

        .post-right {
            width: 100%;

            div {
                width: 100%;
                border: 1px solid;
            }
        }
    }
}

...

#blog-posts {
    display: flex;

    .post-left {
        width: 47.95%;
        //border: 1px solid blue;
        div {
            width: 50%;
            float: right;

            img {
                float: right;
            }
        }
    }

    .divider {
        //border: 1px solid;
        width: 4.1%;

        .divider-dot {
            border-radius: 50%;
            background-color: rgb(235, 235, 235);
            width: 17px;
            height: 17px;
            margin: 0 auto;
        }

        .divider-line {
            width: 1px;
            height: 100%;
            background-color: rgb(235, 235, 235);
            margin: 0 auto;
        }
    }

    .post-right {
        //border: 1px solid green;
        width: 47.95%;

        div {
            width: 50%;

            time {
                font-size: 16px;
                font-family: "Raleway";
                color: rgb(123, 108, 99);
                line-height: 1.875;
                text-align: left;
            }

            h3 {
                font-size: 24px;
                font-family: "Raleway";
                color: rgb(33, 33, 33);
                line-height: 1.25;
                text-align: left;
            }

            p {
                font-size: 16px;
                font-family: "Raleway";
                color: rgb(148, 148, 148);
                line-height: 1.875;
                text-align: left;
            }
        }
    }
}

Answer 1

正如评论中所述:媒体查询应该在您的默认样式之后。因为他们必须覆盖它们。

您的代码:

@media only screen and (max-width : 767px) {
  #blog-posts{
    // styles...
  }
}

#blog-posts{
  // styles...
}

应该是:

#blog-posts{
  // styles...
}

@media only screen and (max-width : 767px) {
  #blog-posts{
    // styles...
  }
}

---

您可以通过覆盖类来简单地演示此行为

div {
  height: 100px;
  width: 100px;
}
.color {
  background: red;
}
.color {
  background: green;
}

<div class="color"></div>

如您所见， block 是绿色而不是红色。

您可以将相同的规则应用于媒体查询，但它们仅在视口(viewport)大于给定大小时才适用。