css @media返回到原来的窗口大小后不会重新呈现

I have a normal, general CSS for a website. After creating some @media queries to make my elements have different colors, sizes and etc on mobile and different resolutions, everything is fine.

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

The problem is when I resize the windows from a normal size to a small one, the effects are applied, but when I resize back to the normal one, the css is not refreshed, some "mobile" rules stay there.

问题是，当我将窗口的大小从正常大小调整为小尺寸时，效果会被应用，但是当我将窗口的大小调整回正常大小时，css并没有刷新，一些“移动”规则仍然存在。

How can I re-render the css without the @media rules, not refreshing the page.

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

This is an example of my HTML:

这是我的HTML的一个例子:

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

With the following css:

用下面的css:

.item-bar{
    float: right;
}

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

Here is a codepen of it: Codepen

这里有一个代码页:codepen

If you resize the view area to a small size until they turn in one span each line and go back to a bigger size, the "bar" element won't be in the right place.

如果您将视图区域的大小调整为较小的大小，直到它们在每行中转换为一个跨度并返回到更大的大小，那么“bar”元素就不会出现在正确的位置。

1 个解决方案

#1

As @JesseKernaghan pointed out in the comments, this is a chrome bug. The easy-fix would be increasing the specificity for the button fixes this, as suggested by @SeanKeating.

正如@JesseKernaghan在评论中指出的，这是一个chrome bug。正如@SeanKeating所建议的那样，易于修复的方法是增加按钮的特异性。

In this question's case, adding this style fixed the problem:

在这个问题的情况下，增加这种风格解决了这个问题:

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

Here is the codepen updated with the easy-fix http://codepen.io/matheusbaumgart/pen/yyzXpp

下面是用容易修复的http://codepen.io/matheusbaumgart/pen/yzxpp更新的代码页

#1