css - 使用 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; }
}

问题是当屏幕恰好是 (@screen-md - 1) 宽时，让它为 1023 px，.hide-sm 和 .hide-md 元素都不会被隐藏。

但是如果@screen-md 不减去 1px 使范围从 768 到 1024 px，就会有另一个问题:.hide-sm 和 .hide-md 元素都将隐藏在 1024 px 屏幕。

示例:https://codepen.io/vyprichenko/pen/ZKvGKM

Answer 1

您走在正确的道路上，但看起来您没有正确使用媒体查询。如果我们只想显示和元素直到某个点，使用 max-width，如果我们希望元素在某个点之后显示，我们需要 min-width 媒体查询。我能够使用此代码获得您需要的结果:

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

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