Foundation CSS 可見性 · W3School Foundation 教程

# Foundation CSS 可見性 ## 根據屏幕尺寸顯示元素以下類會根據設備(屏幕尺寸)來顯示元素。 | 類 | 描述 | | --- | --- | | .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-` 類的可見性。 ``` 你在小型設備上。 你在中型、大型、更大型、超大型的設備上。 你在中型設備上。 你在大型、更大型、超大型的設備上 你在大型設備上。 你在更大型、超大型的設備上。 你在更大型設備上。 你在超大型設備上。 ``` ## 根據屏幕尺寸隱藏元素以下類會根據設備(屏幕尺寸)來隱藏元素。 | 類 | 描述 | | --- | --- | | .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) | ``` 你不在小型設備上。 你不在中型、大型、更大型、超大型的設備上。 你不在中型設備上。 你不在大型、更大型、超大型的設備上。 你不在大型設備上。 你不在更大型、超大型的設備上。 你不在更大型設備上。 你不在超大型設備上。 ``` ## 根據屏幕方向顯示元素以下類會根據設備(屏幕尺寸)來隱藏元素。我們可以設置元素在不同方向是是否顯示或隱藏。筆記本等桌面設備一般是橫向的，但是手機和平板設備可以是橫向或縱向，我們可以根據用戶手機拿的方向來設置元素隱藏與顯示： | 類 | 描述 | | --- | --- | | .show-for-landscape | 在橫向時顯示元素（縱向隱藏） | | .show-for-portrait | 在縱向時顯示元素（橫向隱藏） | 下面實例根據使用的方向顯示文本內容： ### 實例 ``` 文本只在橫向顯示。 文本只在縱向顯示。 ``` ## 觸屏設備的顯示與隱藏你可以根據設備是否支持觸摸來顯示與隱藏元素。 | 類 | 描述 | | --- | --- | | .show-for-touch | 在支持觸屏的設備上顯示(不支持的設備上隱藏) | | .hide-for-touch | 在支持觸屏的設備上隱藏(不支持的設備上顯示) | 下面實例根據設備是否支持觸摸來顯示文本內容： ### 實例 ``` 你的設備支持觸屏。 你的設備不支持觸屏。 ```