未应用媒体查询

Question

这是我的 CSS media query

@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

.right {
  text-align: right;
}
.jane {
  width: 100%;
  font-size: 70pt;
}
.ninja {
  width: 100%;
    font-size: 25pt;
}

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

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

我也尝试过使用min-width，但仍然无法应用这些样式。 为什么会发生这种情况以及如何解决？

Answer 1

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

或者，如果您想将媒体查询放在首位，那么您需要在 CSS 选择器中更加具体。

类似这样的：

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

Answer 2

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

我的 style.css 覆盖了 bootstripe 文件中的任何内容，在本例中，但请参阅下一个主题以了解例外情况

3 - 更具体的声明

.container button.awesome-button {
    font-size: 14px; /* (This will be applied) */
}

.awesome-button{
    font-size: 10px;
}

由于第一个声明非常具体，因此将考虑该声明。这就像告诉'嘿，任何.awesome-button 都应该是10px，然后指出“任何button 在.container 下并且具有.awesome-button 类应该是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>

直接在 HTML 上设置样式将优先于样式表上的任何内容。

5 - 带有!important 的元素（如果有更多!important 元素，则为具体内容）

.awesome-button {
    font-size: 14px !important; /* (This will be applied) */
}

.awesome-button{
    font-size: 10px;
}

任何带有!important 的东西，啊……更重要，所以你的CSS 会理解这一点。但是，如果有更多的!important 规则，其他规则将应用在重要元素内。

当心：使用!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;
  }
}

Answer 3

简单地说：媒体查询中的规则和“正常”规则都适用于此，因此“正常”规则由于级联而被应用。

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

在您的情况下，您可以颠倒 CSS 中规则的顺序，也可以颠倒逻辑，使您的移动案例成为默认视图（移动优先！）并使用类似min-width 媒体查询来更改方式您的文本在更大的屏幕上表现良好。

Answer 4

使您的媒体查询声明遵循与原始 CSS 声明相同的顺序。例如，为了让我的媒体 CSS 工作，我会写

HTML

<div id="box-A"> 
    <div id="box-B"></div> 
</div>

CSS

#box-A #box-B {
    height:  100px; 
}

媒体 CSS

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

希望这能解决您的问题。

Answer 5

例如：

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

希望它对你有用。