如何根据屏幕大小隐藏或显示内容? [英] How do I hide or show content 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;
}
文档
:
https://v4-alpha.getbootstrap .com / layout / responsive-utilities /
这篇关于如何根据屏幕大小隐藏或显示内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!