洞悉互聯(lián)網(wǎng)前沿資訊,探尋網(wǎng)站營(yíng)銷規(guī)律
作者:狐靈科技 | 2019-12-31 14:46 |點(diǎn)擊:
為了加快對(duì)移動(dòng)設(shè)備友好的頁(yè)面開(kāi)發(fā)工作,利用媒體查詢功能并使用這些工具類可以方便的針對(duì)不同設(shè)備展示或隱藏頁(yè)面內(nèi)容。另外還包含了針對(duì)打印機(jī)顯示或隱藏內(nèi)容的工具類。
有針對(duì)性的使用這類工具類,從而避免為同一個(gè)網(wǎng)站創(chuàng)建完全不同的版本。相反,通過(guò)使用這些工具類可以在不同設(shè)備上提供不同的展現(xiàn)形式。
通過(guò)單獨(dú)或聯(lián)合使用以下列出的類,可以針對(duì)不同屏幕尺寸隱藏或顯示頁(yè)面內(nèi)容。
超小屏幕手機(jī) (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面 (≥992px) | 大屏幕桌面 (≥1200px) | |
---|---|---|---|---|
.visible-xs-* |
可見(jiàn) | 隱藏 | 隱藏 | 隱藏 |
.visible-sm-* |
隱藏 | 可見(jiàn) | 隱藏 | 隱藏 |
.visible-md-* |
隱藏 | 隱藏 | 可見(jiàn) | 隱藏 |
.visible-lg-* |
隱藏 | 隱藏 | 隱藏 | 可見(jiàn) |
.hidden-xs |
隱藏 | 可見(jiàn) | 可見(jiàn) | 可見(jiàn) |
.hidden-sm |
可見(jiàn) | 隱藏 | 可見(jiàn) | 可見(jiàn) |
.hidden-md |
可見(jiàn) | 可見(jiàn) | 隱藏 | 可見(jiàn) |
.hidden-lg |
可見(jiàn) | 可見(jiàn) | 可見(jiàn) | 隱藏 |
從 v3.2.0 版本起,形如 .visible-*-*
的類針對(duì)每種屏幕大小都有了三種變體,每個(gè)針對(duì) CSS 中不同的 display
屬性,列表如下:
類組 |
CSS display |
---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
因此,以超小屏幕(xs
)為例,可用的 .visible-*-*
類是:.visible-xs-block
、.visible-xs-inline
和 .visible-xs-inline-block
。
.visible-xs
、.visible-sm
、.visible-md
和 .visible-lg
類也同時(shí)存在。但是從 v3.2.0 版本開(kāi)始不再建議使用。除了 <table>
相關(guān)的元素的特殊情況外,它們與 .visible-*-block
大體相同。