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

我有一个媒体问题。我想将容器的宽度属性更改为页面的100%，但它不适用。我使用引导作为CSS框架。我给你一个来自督察的机会：

代码：

---

加上！宽度末尾的重要信息：100%重要

添加！宽度末尾的要点：100%要点

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

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

编辑 这是因为您首先为媒体查询定义了规则，然后在代码中为同一选择器定义了另一个规则，这基本上覆盖了以前的规则

给你一个通用的例子：

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

.my-class {
    color: blue;
}

无论屏幕大小如何，类my class中的任何元素都将具有蓝色。定义的最后一条规则将覆盖上一条规则。 现在，让我们更改这些规则的顺序：

.my-class {
    color: blue;
}

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

在这种情况下，如果屏幕大小至少为768px，则类为my class的每个元素都将具有蓝色。如果屏幕大小降至768px以下，您的媒体查询规则将覆盖以前的规则，并显示红色

要明确的是，这不是唯一的解决方案。 另一个解决方案是设置！在您的媒体查询中很重要。但是你应该避免使用！如果您有其他解决方案，这一点很重要

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

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

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

---

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

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

编辑 这是因为您首先为媒体查询定义了规则，然后在代码中为同一选择器定义了另一个规则，这基本上覆盖了以前的规则

给你一个通用的例子：

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

.my-class {
    color: blue;
}

无论屏幕大小如何，类my class中的任何元素都将具有蓝色。定义的最后一条规则将覆盖上一条规则。 现在，让我们更改这些规则的顺序：

.my-class {
    color: blue;
}

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

在这种情况下，如果屏幕大小至少为768px，则类为my class的每个元素都将具有蓝色。如果屏幕大小降至768px以下，您的媒体查询规则将覆盖以前的规则，并显示红色

要明确的是，这不是唯一的解决方案。 另一个解决方案是设置！在您的媒体查询中很重要。但是你应该避免使用！如果您有其他解决方案，这一点很重要

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

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

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

---

如评论中所述：媒体查询应位于默认样式之后。因为它们必须覆盖它们

您的代码：

@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{ 高度：100px； 宽度：100px； } .颜色{ 背景：红色； } .颜色{ 背景：绿色； }

---

如评论中所述：媒体查询应位于默认样式之后。因为它们必须覆盖它们

您的代码：

@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{ 高度：100px； 宽度：100px； } .颜色{ 背景：红色； } .颜色{ 背景：绿色； }

---

确保将媒体查询放在实际样式之后，否则它将不可继承。确保将媒体查询放在实际样式之后，否则它将不可继承。不是downvoter，但此答案应为注释。不是唐纳德，但这个答案应该是一个评论。我将媒体查询移动到css文件的底部。现在它工作得很好。谢谢你们，投票赞成。我把媒体查询移到css文件的底部。现在它工作得很好。谢谢你，投赞成票。