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

2022-01-21 00:00:00 css ionic-framework ionic3 twitter-bootstrap bootstrap-4

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

Just like Bootstrap, Ionic (Ionic 3) lets us resize the width of a column based on screen size using col-sm-8, col-md-6, col-lg-4. Bootstrap also comes with classes like visible-xs, hidden-sm, etc. that enables us to show or hide content according to the screen size. Does Ionic 3 ship with anything that lets us do the same?

推荐答案

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

I copied the following CSS classes from Bootstrap 4 Alpha into my project and they work perfectly.

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

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

相关文章