如何根据屏幕大小使用 CSS 隐藏或显示内容？答案

【问题标题】：How do I hide or show content with CSS depending on screen size?如何根据屏幕大小使用 CSS 隐藏或显示内容？
【发布时间】：2017-11-14 19:44:03
【问题描述】：

就像 Bootstrap 一样，Ionic (Ionic 3) 允许我们使用 col-sm-8、col-md-6、col-lg-4 根据屏幕大小调整列的宽度。 Bootstrap 还带有 visible-xs、hidden-sm 等类，使我们能够根据屏幕大小显示或隐藏内容。 Ionic 3 是否附带任何可以让我们做同样事情的东西？

【问题讨论】：

标签： css twitter-bootstrap ionic-framework ionic3 bootstrap-4

【解决方案1】：

我将 Bootstrap 4 Alpha 中的以下 CSS 类复制到我的项目中，它们运行良好。

.invisible {
  visibility: hidden !important;
}

.hidden-xs-up {
  display: none !important;
}

@media (max-width: 575px) {
  .hidden-xs-down {
    display: none !important;
  }
}

@media (min-width: 576px) {
  .hidden-sm-up {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-sm-down {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden-md-up {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .hidden-md-down {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .hidden-lg-up {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  .hidden-lg-down {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .hidden-xl-up {
    display: none !important;
  }
}

.hidden-xl-down {
  display: none !important;
}

Docs: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

【讨论】：

【解决方案2】：

例子：

<div hidden-xs visible-block-md>Hidden on small screen</div>

SCSS 解决方案是：

$screen-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

@each $keySize, $valueSize in $screen-breakpoints {
    [hidden-#{$keySize}] {
        @media (min-width: $valueSize) {
            display: none;
        }
    }
}

@each $keySize, $valueSize in $screen-breakpoints {
    [visible-block-#{$keySize}] {
        @media (min-width: $valueSize) {
            display: block;
        }
    }
}

@each $keySize, $valueSize in $screen-breakpoints {
    [visible-inline-block-#{$keySize}] {
        @media (min-width: $valueSize) {
            display: inline-block;
        }
    }
}

如果你使用 Ionic，你可以使用类似的东西：

@each $breakpoint in map-keys($screen-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $screen-breakpoints);

    @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
        // Provide `[hidden-{bp}]` attributes for floating the element based
        // on the breakpoint
        [hidden#{$infix}] {
            display: none !important;
        }
    }
}

【讨论】：