Html 未应用媒体查询

这是我的CSS

媒体查询

@媒体屏幕和（最大宽度：450px）{
.box\u网址{
字号：12号；
}
.方框标题{
字号：13pt；
}
.对{
文本对齐：左对齐；
}
简先生{
字号：10pt；
}
忍者先生{
字号：12号；
}
}

还有我的普通CSS

。对{
文本对齐：右对齐；
}
简先生{
宽度：100%；
字号：70pt；
}
忍者先生{
宽度：100%；
字号：25pt；
}

但是当我运行该站点时，一些媒体查询没有被应用

当我在chrome中打开开发工具时，它显示媒体查询正在被覆盖

我也尝试过使用

minwidth

，但它仍然没有应用这些样式。

---

为什么会发生这种情况以及如何解决这种情况？

CSS的重要性顺序如下：

1-单一声明

body {
    background: red;
}

2-任何低于第一条的声明

body {
    background-color: red;
}

body {
    background-color: blue; /* (This will be applied) */
}

/* I'm overwriting my background, so it should be blue now */

收割台上的位置也会产生影响

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">

由于第一项声明非常具体，因此将考虑这项声明。这就像告诉“嘿，任何

。可怕的按钮

应该是10px，然后指出“任何

按钮

在

.container

下，并且具有类

。可怕的按钮

应该是14px。所以你的CSS应该尊重最具体和精确的坐标

4-CSS作为属性

<style>
  .blue{
    color:blue;
  }
</style>

<div class="blue" style="color: red">The color of this div will be red, no matter the class</div>

任何带有

！important

的规则都更重要，所以CSS会理解这一点。但是，如果有更多

！important

规则，其他规则将应用于重要元素中

要当心：使用

！重要的
应该小心使用，在某些情况下作为最后的资源


因此，在您的情况下，简单地将所有媒体查询放在“正常”css之后，如下所示：

.right {
  text-align: right;
}
.jane {
  width: 100%;
  font-size: 70pt;
}
.ninja {
  width: 100%;
  font-size: 25pt;
}
@media screen and (max-width: 450px) {
  .box_url {
    font-size: 12pt;
  }
  .box_heading {
    font-size: 13pt;
  }
  .right {
    text-align: left;
  }
  .jane {
    font-size: 10pt;
  }
  .ninja {
    font-size: 12pt;
  }
}

CSS代表级联样式表，所以您必须将媒体查询放在标准CSS之后

像这样：

.right {
  text-align: right;
}
.jane {
  width: 100%;
  font-size: 70pt;
}
.ninja {
  width: 100%;
  font-size: 25pt;
}
@media screen and (max-width: 450px) {
  .box_url {
    font-size: 12pt;
  }
  .box_heading {
    font-size: 13pt;
  }
  .right {
    text-align: left;
  }
  .jane {
    font-size: 10pt;
  }
  .ninja {
    font-size: 12pt;
  }
}

。对{
文本对齐：右对齐；
}
简先生{
宽度：100%；
字号：70pt；
}
忍者先生{
宽度：100%；
字号：25pt；
}
@媒体屏幕和屏幕（最大宽度：450px）{
.box\u网址{
字号：12号；
}
.方框标题{
字号：13pt；
}
.对{
文本对齐：左对齐；
}
简先生{
字号：10pt；
}
忍者先生{
字号：12号；
}
}

或者，如果您想将媒体查询放在首位，那么您需要在CSS选择器中使用更具体的内容

大概是这样的：

.right {
  text-align: right;
}
.jane {
  width: 100%;
  font-size: 70pt;
}
.ninja {
  width: 100%;
  font-size: 25pt;
}
@media screen and (max-width: 450px) {
  .box_url {
    font-size: 12pt;
  }
  .box_heading {
    font-size: 13pt;
  }
  .right {
    text-align: left;
  }
  .jane {
    font-size: 10pt;
  }
  .ninja {
    font-size: 12pt;
  }
}

@媒体屏幕和（最大宽度：450px）{
.flex.box\u url{
字号：12号；
}
.flex.box\u标题{
字号：13pt；
}
.弗莱克斯，对{
文本对齐：左对齐；
}
弗莱克斯，简{
字号：10pt；
}
.忍者{
字号：12号；
}
}
.对{
文本对齐：右对齐；
}
简先生{
宽度：100%；
字号：70pt；
}
忍者先生{
宽度：100%；
字号：25pt；
}
简单地说：媒体查询中的规则和“正常”规则都适用于此处，因此“正常”规则是由于级联而应用的

您的屏幕大小小于
450px
，因此媒体查询规则适用。“正常”规则将在任何情况下适用。级联将根据样式表中稍后出现的任何一个来确定“赢家”，因为它们都是同样特定的，这似乎是您的“正常”规则

在您的情况下，您可以颠倒CSS中规则的顺序，也可以颠倒逻辑，将您的手机案例设置为默认视图（手机优先！），并使用类似
min width
的媒体查询来更改文本在更大屏幕上的行为方式。
例如：

@media (max-width: 450px){
    .box_url {
    font-size: 12pt;
    }
    .box_heading {
    font-size: 13pt;
    }
    .right {
    text-align: left;
    }
    .jane {
    font-size: 10pt;
    }
    .ninja {
    font-size: 12pt;
    }
}

希望它对您有用。
使您的媒体查询声明遵循与原始css声明相同的顺序。例如，要使我的媒体css工作，我将编写

HTML

媒体CSS

@media screen and (max-width: 480px) {
    /*This won't work*/
    #box-B {
        height:  50px;
    }
    /*This will work*/
    #box-A #box-B {
        height:  50px; 
    }
}

希望这能解决您的问题。
您应该恢复声明的顺序。无论您建议使用
！important
，您都应该了解CSS的特殊性
#box-A #box-B {
    height:  100px; 
}

@media screen and (max-width: 480px) {
    /*This won't work*/
    #box-B {
        height:  50px;
    }
    /*This will work*/
    #box-A #box-B {
        height:  50px; 
    }
}