Foundation CSS 可見性

知識 08-13

根據屏幕尺寸顯示元素

以下類會根據設備(屏幕尺寸)來顯示元素。

類	描述
.show-for-small-only	只在小型設備上顯示元素 (屏幕寬度小於 40.0625em )
.show-for-medium-up	在中型及以上設備上顯示元素 (屏幕寬度大於 40.0625em)
.show-for-medium-only	只在中型設備上顯示元素 (屏幕寬度在 40.0625em 到 64.0625em 之間)
.show-for-large-up	在大型及以上設備上顯示元素 (屏幕寬度大於 64.0625em)
.show-for-large-only	只在大型設備上顯示元素 (屏幕寬度在 64.0625em 到 90.0625em 之間)
.show-for-xlarge-up	在更大型及以上設備上顯示元素 (屏幕寬度大於 90.0625em)
.show-for-xlarge-only	只在更大型及以上設備上顯示元素 (屏幕寬度在 90.0625em 到 120.0625em之間)
.show-for-xxlarge-up	在超大型及以上設備上顯示元素 (屏幕寬度大於 120.0625em)

以下實例演示了以上所有 .show- 類的可見性。

你在小型設備上。

Foundation CSS 可見性

根據屏幕尺寸隱藏元素

以下類會根據設備(屏幕尺寸)來隱藏元素。

類	描述
.hide-for-small-only	只在小型設備上隱藏元素 (屏幕寬度小於 40.0625em )
.hide-for-medium-up	在中型及以上設備上隱藏元素 (屏幕寬度大於 40.0625em)
.hide-for-medium-only	只在中型設備上隱藏元素 (屏幕寬度在 40.0625em 到 64.0625em 之間)
.hide-for-large-up	在大型及以上設備上隱藏元素 (屏幕寬度大於 64.0625em)
.hide-for-large-only	只在大型設備上隱藏元素 (屏幕寬度在 64.0625em 到 90.0625em 之間)
.hide-for-xlarge-up	在更大型及以上設備上隱藏元素 (屏幕寬度大於 90.0625em)
.hide-for-xlarge-only	只在更大型及以上設備上隱藏元素 (屏幕寬度在 90.0625em 到 120.0625em之間)
.hide-for-xxlarge-up	在超大型及以上設備上隱藏元素 (屏幕寬度大於 120.0625em)

你不在小型設備上。

Foundation CSS 可見性

根據屏幕方向顯示元素

以下類會根據設備(屏幕尺寸)來隱藏元素。

我們可以設置元素在不同方向是是否顯示或隱藏。筆記本等桌面設備一般是橫向的，但是手機和平板設備可以是橫向或縱向，我們可以根據用戶手機拿的方向來設置元素隱藏與顯示：

類	描述
.show-for-landscape	在橫向時顯示元素（縱向隱藏）
.show-for-portrait	在縱向時顯示元素（橫向隱藏）

下面實例根據使用的方向顯示文本內容：

實例

文本只在橫向顯示。

文本只在縱向顯示。

Foundation CSS 可見性

觸屏設備的顯示與隱藏

你可以根據設備是否支持觸摸來顯示與隱藏元素。

類	描述
.show-for-touch	在支持觸屏的設備上顯示(不支持的設備上隱藏)
.hide-for-touch	在支持觸屏的設備上隱藏(不支持的設備上顯示)

下面實例根據設備是否支持觸摸來顯示文本內容：

實例

你的設備支持觸屏。

你的設備不支持觸屏。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 程序員小新人學習 的精彩文章:

您可能感興趣