为什么这个 flexbox 媒体查询不起作用？

Question

对此新手，请友善:)（请原谅草率的代码）我进行了搜索，并且已经在这里找到了帮助。一直在帮助重做一家 ebay 商店。试图让这个媒体查询与 flexbox 一起工作。据我了解，媒体查询不能内联使用，但可以在头部的样式标签内使用，而无需链接到外部 css。

这是布局的代码笔。我什至测试了其他媒体查询（现在有一个）并且它们有效。但是，一旦屏幕尺寸变小，我希望 flex 项目能够包裹到完整的 100% 宽度，而且它似乎不起作用。

我知道我的目标是正确的规则，因为它是在没有查询的情况下测试的：

.flex-item {
   width: 100%;
}

它做了我想要它做的事情......为什么背景颜色查询在 HTML 中有效，而 flex 查询却没有？

我确定这很愚蠢。

https://codepen.io/pmendola/pen/MXjwza

（为了简单起见，我删除了一些代码 - 只有少数 flex 规则在使用，就在 css 的顶部）

Answer 1

这是一个特异性问题。媒体查询不会为查询添加特异性，所以

@media screen and (max-width: 480px) {
    .flex-item { ...

和

.flex-item { ...

同等重要。结果是使用了样式表中最后声明的那个（在本例中为样式标记）。后面的声明会覆盖第一个。

您可以通过将媒体查询规则放在样式中比声明不在媒体查询中的规则更靠后的位置来纠正此问题。将其视为覆盖默认值的媒体特定样式。因此，它们需要在样式中稍后出现。

Answer 2

将!important 添加到 flex 定义中将为您解决此问题。

@media screen and (max-width: 480px) {
  body {
    background-color: yellow;
    }
    .flex-item {
      width: 100% !important;
      margin: 0 auto;
    }     
}

这是什么意思？

您需要一种更具体的样式，该样式仅为移动屏幕定义并附加到元素上。 More Info