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

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

您的代码：

loopMe

应该是：

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

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

您可以将相同的规则应用于媒体查询，但只有在视口大于给定大小时才适用。

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

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

为了清楚起见，这不是唯一的解决方案。另一种解决方案是在媒体查询中设置!important。但如果您有其他解决方案，则应避免使用!important。

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

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

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

Answer 3

在宽度末尾添加！important：100％重要

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

3 个答案:

修改