亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

文字

Foundation CSS 可見性

根據(jù)屏幕尺寸顯示元素

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

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

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

<p?class="show-for-small-only">你在小型設(shè)備上。</p>
<p?class="show-for-medium-up">你在中型、大型、更大型、超大型的設(shè)備上。</p>
<p?class="show-for-medium-only">你在中型設(shè)備上。</p>
<p?class="show-for-large-up">你在大型、更大型、超大型的設(shè)備上</p>
<p?class="show-for-large-only">你在大型設(shè)備上。</p>
<p?class="show-for-xlarge-up">你在更大型、超大型的設(shè)備上。</p>
<p?class="show-for-xlarge-only">你在更大型設(shè)備上。</p>
<p?class="show-for-xxlarge-up">你在超大型設(shè)備上。</p>

實例預(yù)覽 ?

根據(jù)屏幕尺寸隱藏元素

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

類 描述
.hide-for-small-only 只在小型設(shè)備上隱藏元素 (屏幕寬度小于 40.0625em )
.hide-for-medium-up 在中型及以上設(shè)備上隱藏元素 ?(屏幕寬度大于 40.0625em)
.hide-for-medium-only 只在中型設(shè)備上隱藏元素 (屏幕寬度在 40.0625em 到 64.0625em 之間)
.hide-for-large-up 在大型及以上設(shè)備上隱藏元素 (屏幕寬度大于 64.0625em)
.hide-for-large-only 只在大型設(shè)備上隱藏元素 (屏幕寬度在 64.0625em 到 90.0625em 之間)
.hide-for-xlarge-up 在更大型及以上設(shè)備上隱藏元素 (屏幕寬度大于 90.0625em)
.hide-for-xlarge-only 只在更大型及以上設(shè)備上隱藏元素 (屏幕寬度在 90.0625em 到 120.0625em之間)
.hide-for-xxlarge-up 在超大型及以上設(shè)備上隱藏元素 (屏幕寬度大于 120.0625em) 
<p?class="hide-for-small-only">你不在小型設(shè)備上。</p>
<p?class="hide-for-medium-up">你不在中型、大型、更大型、超大型的設(shè)備上。</p>
<p?class="hide-for-medium-only">你不在中型設(shè)備上。</p>
<p?class="hide-for-large-up">你不在大型、更大型、超大型的設(shè)備上。</p>
<p?class="hide-for-large-only">你不在大型設(shè)備上。</p>
<p?class="hide-for-xlarge-up">你不在更大型、超大型的設(shè)備上。</p>
<p?class="hide-for-xlarge-only">你不在更大型設(shè)備上。</p>
<p?class="hide-for-xxlarge-up">你不在超大型設(shè)備上。</p>

實例預(yù)覽 ?

根據(jù)屏幕方向顯示元素

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

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

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

下面實例根據(jù)使用的方向顯示文本內(nèi)容：

實例

<p?class="show-for-landscape">文本只在橫向顯示。</p>
<p?class="show-for-portrait">文本只在縱向顯示。</p>

實例預(yù)覽 ?

觸屏設(shè)備的顯示與隱藏

你可以根據(jù)設(shè)備是否支持觸摸來顯示與隱藏元素。

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

下面實例根據(jù)設(shè)備是否支持觸摸來顯示文本內(nèi)容：

實例

<p?class="show-for-touch">你的設(shè)備支持觸屏。</p>
<p?class="hide-for-touch">你的設(shè)備不支持觸屏。</p>
實例預(yù)覽 ?


關(guān)于我們 聯(lián)系我們 留言板

手冊網(wǎng)

上一篇： 下一篇：