如何根据屏幕尺寸隐藏或显示内容？

Question

就像引导,离子(离子型3)让我们调整列的宽度基于使用屏幕大小col-sm-8,col-md-6,col-lg-4.引导还配备了像类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/