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

Question

我遇到了媒体查询问题。我想将容器的width 属性更改为页面的100%，但它不适用。我使用引导程序作为 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

在宽度末尾添加 !important:100% 重要

Answer 2

您在媒体查询中的样式正在被您的 scss 文件中的另一条规则覆盖。

尝试将该媒体查询块移动到 style.scss 文件的末尾。

编辑

发生这种情况是因为您首先为媒体查询定义规则，稍后在您的代码中您有另一个相同选择器的规则，这基本上覆盖了您之前的规则。

给你一个通用的例子：

@media (max-width: 768px) {
    .my-class {
        color: red;
    }
}

.my-class {
    color: blue;
}

无论屏幕大小，任何具有my-class 类的元素都将具有blue 的颜色。最后定义的规则将覆盖您之前的规则。 现在，让我们更改这些规则的顺序：

.my-class {
    color: blue;
}

@media (max-width: 768px) {
    .my-class {
        color: red;
    }
}

在这种情况下，如果屏幕尺寸至少为 768 像素，则每个 my-class 类的元素都将具有 blue 的颜色。如果屏幕尺寸下降到 768 像素以下，您的媒体查询规则将覆盖您之前的规则，颜色为 red。

需要明确的是，这不是唯一的解决方案。 另一种解决方案是在您的媒体查询中设置!important。但如果您有其他解决方案，则应避免使用!important。

另一种可能的解决方案是将您的类包装在另一个媒体查询中（在这种情况下，顺序无关紧要）。

@media (max-width: 768px) {
    .my-class {
        color: red;
    }
}

@media (min-width: 768px) {
    .my-class {
        color: blue;
    }
}

Answer 3

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

您的代码：

@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>

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

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