如何根据屏幕尺寸隐藏或显示CSS内容? [英] How do I hide or show content with CSS depending on screen size?

问题描述

就像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;
}

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

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

这篇关于如何根据屏幕尺寸隐藏或显示CSS内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！