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; 
     } 
}