移动第一媒体查询：有没有办法'范围'样式（关于可见性类）？

Question

我正在使用移动第一种方法使用CSS3媒体查询开发一个页面，这意味着我从小处开始工作。

但现在我遇到了一个问题：如何处理＆＃39;风格流血＆＃39;可见性课程？
让我解释一下我的意思 - 当我的第一个媒体查询看起来像这样：

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

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

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

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

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

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

Answer 1

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

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