画面サイズに応じてコンテンツを非表示または表示するにはどうすればよいですか？

Question

Ionic（Ionic 3）は、ブートストラップと同様に、col-sm-8、col-md-6、col-lg-4を使用して、画面サイズに基づいて列の幅をリサイズできます。ブートストラップにはvisible-xs,hidden-smなどのクラスもあり、画面サイズに応じてコンテンツを表示または非表示にすることができます。 Ionic 3は私たちに同じことをさせる何かを持っていますか？

Answer 1

Bootstrap 4 Alphaから次のCSSクラスを私のプロジェクトにコピーして、完全に動作します。

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