CSS媒體查詢隱藏元素

Question

我想知道什麼是使CSS類系統響應屏幕尺寸隱藏元素的正確方法。

我目前的做法是用這樣的媒體查詢：

/* From 768 to 1023 px */ 
@media (min-width: @screen-sm) and (max-width: (@screen-md - 1)) 
{ 
    .hide-sm { display: none; } 
} 

/* From 1024 to 1199 px */ 
@media (min-width: @screen-md) and (max-width: (@screen-lg - 1)) 
{ 
    .hide-md { display: none; } 
} 

的問題是，當屏幕恰好是（@屏幕-MD - 1）寬，讓它成爲1023像素，沒有。 hide-sm和.hide-md元素將被隱藏。

但如果不減去@屏幕-MD使1px的範圍從768到1024像素，會有另外一個問題：既.hide-SM和.hide-MD元素將在1024像素隱藏屏幕。

例子：https://codepen.io/vyprichenko/pen/ZKvGKM

Answer 1

你是在正確的道路上，但它看起來像你沒有正確使用媒體查詢。如果我們只想顯示元素直到某個點，則使用max-width，如果我們希望該元素在某個點後顯示，我們需要最小寬度的媒體查詢。我能夠使用此代碼獲得您需要的結果：

@media(max-width:1023px){ 
     .hide-0-to-1024{ 
     display:none; 
     } 
    } 

@media (min-width: 1024px) { 
     .hide-1024-up { 
     display: none; 
     } 
}