Question

新的，好的:)（并原谅邋code的代码）我做了搜索，已经在这里找到了帮助。一直在帮助重做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添加到弹性定义中将为您解决此问题。

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

这是什么意思？

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

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

2 个答案:

这是什么意思？