回到原始窗口大小后，css @media 不会重新渲染答案

【问题标题】：css @media not re-rendering after going back to the original windows size回到原始窗口大小后，css @media 不会重新渲染
【发布时间】：2015-04-01 22:33:23
【问题描述】：

我有一个普通的网站 CSS。在创建了一些@media 查询以使我的元素在移动设备和不同分辨率上具有不同的颜色、大小等之后，一切都很好。

问题是当我将窗口从正常大小调整为小窗口时，会应用效果，但是当我调整回正常大小时，css 没有刷新，一些“移动”规则保留在那里。

如何在没有@media 规则的情况下重新渲染 css，而不是刷新页面。

这是我的 HTML 示例：

<div class="item">
    <span class="item-foo">FOO </span>
    <span class="item-bar">BAR </span>
</div>

使用以下css：

.item-bar{
    float: right;
}

@media only screen and (max-width: 992px){
    .item-foo, .item-bar{
        display: block;
        float: none !important;
    }
}

这是它的代码： Codepen

如果您将视图区域的大小调整为较小的尺寸，直到它们每行变成一个跨度并返回到较大的尺寸，“bar”元素将不在正确的位置。

【问题讨论】：

我们能看到代码吗？
这似乎是一个一致的chrome bug，之前有人问过：stackoverflow.com/questions/13935255/…
@JesseKernaghan，是的，伙计，这完全是同一个错误。有趣的是，我会看看他们的回复。谢谢！

标签： css responsive-design media-queries

【解决方案1】：

正如@JesseKernaghan 在 cmets 中指出的那样，这是一个 chrome 错误。正如@SeanKeating 所建议的那样，简单的修复方法是增加按钮修复此问题的特异性。

在这个问题的情况下，添加这个样式解决了这个问题：

.item .item-bar{
  float: right;
  display: inline;
}

这是使用 easy-fix 更新的 codepen http://codepen.io/matheusbaumgart/pen/yyzXpp

【讨论】：