Question

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

问题是当我将窗口从正常尺寸调整为小尺寸时，会应用效果，但是当我调整到正常尺寸时，css不会刷新，有些＆＃34;移动＆＃34;规则留在那里。

如何在没有@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

如果您将视图区域的大小调整为一个小尺寸，直到它们在每一行中转入一个范围并返回到更大的尺寸，那么＆＃34; bar＆＃34;元素不会出现在正确的位置。

Answer 1

@JesseKernaghan在评论中指出，这是一个铬虫。根据@SeanKeating的建议，易于修复将提高按钮修复的特异性。

在这个问题的案例中，添加此样式可以解决问题：

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

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

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

1 个答案: