媒体查询在它应该之后被执行答案

【问题标题】：Media query being executed after it should媒体查询在它应该之后被执行
【发布时间】：2016-09-05 23:59:48
【问题描述】：

我正在使用 flex 项目，所以我认为这可能是我的代码出现奇怪行为的问题。

我有 .flexContainer 具有 max-width 属性的类。调整窗口大小后，我想将此 max-width 属性更改为更高的值，但如果我将媒体查询设置为：

@media screen and (max-width: 850px){
    .flexContainer{
       max-width: 60%; 
    }
}

元素的max-width 更改为835px 而不是850px。

这是我的代码：

HTML：

<div id="container">
  <div id="left" class="block">Left</div>
  <div id="center" class="block">
    <div class="flexContainer">
      <div class="flexDiv"></div>
    </div>
    <div class="flexContainer">
      <div class="flexDiv"></div>
    </div>
    <div class="flexContainer">
      <div class="flexDiv"></div>
    </div>
  </div>
  <div id="right" class="block">Right</div>
</div>

CSS：

html, body{
    width: 100%;
    height: 100%;
}

#container{
    display: flex;
    height: 100%;
    background-color: blue;
}

.block{
    flex: 1;
}

#left{
    background-color: green;
}

#center{
    display: flex;
    flex: 1;
    flex-wrap: wrap;  
    align-content: flex-start;
}

#right{
    background-color: orange;
}

.flexContainer{
    flex: 1;
    min-width: 100px;
    max-width: 50%;
    box-sizing: border-box;
    height: 150px;
    background-color: red;
    padding: 10px;
}

.flexDiv{
    width: 100%;
    height: 100%;
    background-color: yellow;
}

@media screen and (max-width: 850px){
    .flexContainer{
       max-width: 60%; 
    }
}

JSFiddle，您可以在其中看到max-width 属性更改为835px 而不是850px。

编辑：我添加了两个屏幕截图，以便您查看：

为什么媒体查询在它应该执行之后才被执行？

【问题讨论】：

改成 max-width: 60%;小提琴上的 iframe 正好在 850 像素
@Chizzle 在我的情况下，它正在更改为835px。我也在我的真实项目中遇到了同样的问题，所以我试图在 JSFiddle 上简化它。
尝试将!important 设置为最大宽度：850px
它的功能正如我所期望的那样，正如 Chizzle 所提到的，它在我的浏览器/操作系统中的 850 像素处发生变化（Mac OS X 上的 Chrome 52.0.2723.2 dev（64 位）） -- 你的浏览器是什么？
@ArthurWeborg 是的，我注意到了这一点，并在我看到问题时尽快给出了答案。我想重现我真实项目的问题并在这里简化它（更清楚，不要粘贴html和css的行和行）但似乎我简化了太多。我会尝试搜索它并再次编辑问题。

标签： html css media-queries flexbox

【解决方案1】：

我在这里发现了我的问题。只是我必须删除body 标签的margin。

我将尝试重现我在真实项目中的效果（我在其中修复了body 标签）并再次编辑问题。

编辑：这似乎是 Google Chrome 的错误或类似问题，因为我无法再重现该错误。

我得到的错误是，当我查看 Google Chrome 检查器上的 html 标签时，它给了我错误的网页值（大约少了 30 像素，我没有任何 padding/margin围绕它）所以我认为媒体查询是在屏幕的错误width 中执行的。

我知道这是一个“愚蠢”的解决方案，但当我关闭并重新打开 Google Chrome 时，它再次起作用。现在它就像正常行为一样工作。

【讨论】：