移動第一媒體查詢：是否有'範圍'樣式（關於可見性類）的方法？

Question

我正在開發一個使用CSS3媒體查詢的頁面，使用移動的第一種方法，這意味着我開始小，工作的方式。

但是現在我遇到了一個問題：如何處理能見度類的'流血'？
讓我解釋一下我的意思是 - 當我的第一個媒體查詢看起來是這樣的：

@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框架，看看如何做到這一點。我想這是處理這種情況的最好方法。