html - 移动优先媒体查询：有没有办法“范围”样式（关于可见性类）？

Question

我正在使用移动优先方法使用 CSS3 媒体查询开发一个页面，这意味着我从小处着手，然后一路向上。

但是现在我遇到了一个问题：如何处理可见性类的“样式出血”？
让我解释一下我的意思——当我的第一个媒体查询看起来像这样时：

@media only screen and (min-width: 20em) {
    // Styles here
}

这些样式不适用于小于 20em 的屏幕。这实际上没有问题，因为没有包含在媒体查询中的样式基本上是第一个媒体查询（我希望你明白我的意思）。

但现在我想引入可见性类来隐藏某些屏幕尺寸的元素。问题是，这些风格基本上是被继承的。看：

@media only screen and (min-width: 20em) {
    .hidden-first {
        display: none;
    }
}

hidden-first一旦屏幕宽度为 20em 或更宽，任何具有该类的元素都会被隐藏。但只要媒体查询处于活动状态，我只想隐藏元素。

我该怎么做——有没有办法在另一个媒体查询中重置样式？

score 0 · Accepted Answer

我建议你创建一个类hide-for-medium并为其创建规则display:none !important;

看看Foundation框架，看看它是如何做到的。我想这是处理这种情况的最好方法。

1 回答 1