如何根據屏幕尺寸隱藏或顯示內容？

Question

就像Bootstrap一樣，Ionic（Ionic 3）可讓我們根據屏幕尺寸使用col-sm-8,col-md-6,col-lg-4調整列寬。 Bootstrap還附帶類似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/