css @media 在返回原始 windows 大小后不会重新渲染

Question

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

问题是当我将 windows 从正常大小调整为较小时，应用了效果，但是当我调整回正常大小时，css 没有刷新, 一些 "mobile" 规则留在那里。

如何在没有@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" 元素将不会位于正确的位置。

Answer 1

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

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

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

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

css @media 在返回原始 windows 大小后不会重新渲染

css @media not re-rendering after going back to the original windows size

css

media-queries

responsive-design