Question

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

Answer 1

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

.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/

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

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

2 个答案: