可見度類別

能見度類別讓您根據螢幕大小或裝置方向顯示或隱藏元素。您也可以使用能見度類別來控制使用者根據其瀏覽環境看到哪些元素。

能見度類別使用 `!important` 來確保它們不會被更特定的選擇器覆寫。此架構仔細避免使用 `!important` 宣告。這是少數會這樣做的元件之一。

沒有用於偵測觸控式螢幕裝置的類別，因為桌上型電腦和行動裝置瀏覽器都會不一致地回報觸控支援。在此處深入了解：您無法偵測觸控螢幕

根據螢幕大小顯示

在此範例中，我們使用 .show 能見度類別根據使用者檢視網頁的裝置顯示特定文字字串。如果其瀏覽器符合類別的條件，元素將會顯示。如果不符合，則會隱藏。

<p>You are on a small screen or larger.</p>
<p class="show-for-medium">You are on a medium screen or larger.</p>
<p class="show-for-large">You are on a large screen or larger.</p>

您使用的是小型螢幕或更大螢幕。

您使用的是中型螢幕或更大螢幕。

您使用的是大型螢幕或更大螢幕。

這些類別會自動在類別中指定的小於特定螢幕大小上隱藏元素。因此，.show-for-medium 會在小型螢幕上隱藏元素，並在中型及更大螢幕上顯示元素。

另一組類別讓您僅在特定螢幕大小上顯示內容。只要在類別結尾加上 -only 即可。

在程式碼範例下方看不到任何文字嗎？您一定是在一個*超*大的螢幕上。

<p class="show-for-small-only">You are <em>definitely</em> on a small screen.</p>
<p class="show-for-medium-only">You are <em>definitely</em> on a medium screen.</p>
<p class="show-for-large-only">You are <em>definitely</em> on a large screen.</p>

您絕對在一個小螢幕上。

您絕對在一個中型螢幕上。

您絕對在一個大型螢幕上。

依螢幕大小隱藏

這個範例顯示相反的狀況：它使用 .hide 可見度類別來陳述哪些元素應該根據裝置的螢幕大小消失。

沒有 .hide-for-small 類別，因為那樣只會永久隱藏元素。對於這種情況，您可以改用一般的舊 .hide 類別。

<p class="hide-for-medium">You are <em>not</em> on a medium screen or larger.</p>
<p class="hide-for-large">You are <em>not</em> on a large screen or larger.</p>

您不在中型或更大的螢幕上。

您不在大型或更大的螢幕上。

如果您正在閱讀這段文字，表示您在一個大型螢幕上，而且看不到上述任何一個範例。

與 .show 一樣，這些類別也有 -only 版本。

<p class="hide-for-small-only">You are <em>definitely not</em> on a small screen.</p>
<p class="hide-for-medium-only">You are <em>definitely not</em> on a medium screen.</p>
<p class="hide-for-large-only">You are <em>definitely not</em> on a large screen.</p>

您絕對不在一個小螢幕上。

您絕對不在一個中型螢幕上。

您絕對不在一個大型螢幕上。

一般隱藏類別

如果您真的只是需要無論如何都隱藏某些東西，也有類別可以做到這一點。.hide 和 .invisible 類別分別在元素上設定 display: none 和 visibility: hidden。請注意，這兩個類別都會對螢幕閱讀器隱藏內容。

<p class="hide">Can't touch this.</p>
<p class="invisible">Can sort of touch this.</p>
<p class="visible">You can see this.</p>

方向偵測

這個簡單的範例顯示兩個文字字串如何決定一個元素在不同方向中是否可見。當您旋轉裝置時，這會在行動裝置上改變。在桌面上，方向幾乎總是報告為橫向。

<p class="show-for-landscape">You are in landscape orientation.</p>
<p class="show-for-portrait">You are in portrait orientation.</p>

您處於橫向。

您處於直向。

無障礙性

將 display: none 加入元素會阻止螢幕閱讀器讀取它。但是，有一些技巧可以在隱藏內容的同時，仍然讓螢幕閱讀器可以讀取它。

僅對螢幕閱讀器顯示

若要視覺上隱藏內容，同時仍允許輔助技術讀取它，請加入類別 show-for-sr。

<p class="show-for-sr">This text can only be read by a screen reader.</p>
<p>There's a line of text above this one, you just can't see it.</p>

這段文字上方有一行文字，只是你無法看到。

僅隱藏於螢幕閱讀器

若要隱藏輔助技術的文字，同時保持其可見性，請加入屬性 aria-hidden="true"。這不會影響元素的外觀，但螢幕閱讀器會跳過它。

通常不建議對螢幕閱讀器隱藏內容。aria-hidden 最適合用於遮罩頁面的純視覺元素。

<p aria-hidden="true">This text can be seen, but won't be read by a screen reader.</p>

建立跳躍連結

如果你的網站有許多導覽，螢幕閱讀器必須讀取整個導覽才能到達網站的內容。為了解決此問題，你可以在頁面最上方加入一個跳躍連結，當使用者點選時，會將使用者傳送到頁面下方，略過導覽。

使用類別 .show-on-focus 來隱藏元素，但當元素有焦點時除外。將 tabindex="-1" 加入目標元素，使其可獲得焦點。（或者將其設定為 0，如果使用者也應該可以按 Tab 鍵移動到該元素。另請參閱 MDN 文件中的 tabindex。）

<p><a class="show-on-focus" href="#mainContent">Skip to Content</a></p>

<header id="header" role="banner">
</header>

<main id="mainContent" role="main" tabindex="0">
</main>

跳至內容

偵測 IE10+

Internet Explorer 的消亡來得不夠快。這些類別將協助你使用 show-for-ie 和 hide-for-ie 類別鎖定所有 IE10+ 瀏覽器。

<p class="show-for-ie">Please get a new browser.</p>
<p class="hide-for-ie">Thanks for not using Interner Explorer.</p>

請取得新的瀏覽器。

感謝你沒有使用 Internet Explorer。

偵測深色模式

深色模式在過去幾年變得流行。show-for-dark-mode 和 hide-for-dark-mode 類別將允許你在設計深色模式時輕鬆顯示和隱藏內容。

<p class="show-for-dark-mode">It's scary in the dark.</p>
<p class="hide-for-dark-mode">You can see the light.</p>

黑暗中很可怕。

你可以看到光。

偵測固定模式

如果你正在使用固定外掛程式，這些類別可以協助你在固定元件時顯示和隱藏元素。show-for-sticky 和 hide-for-sticky 類別將允許你輕鬆鎖定固定容器中的這些項目。

<div data-sticky-container>
  <div class="sticky" data-sticky>
    <p class="hide-for-sticky">We be scrolling...</p>
    <p class="show-for-sticky">I'm going to rest here for a sec. You keep scrolling.</p>
  </div>
</div>

我們正在捲動...

我將在此處休息一下。請繼續捲動。

Sass 參考

混合

我們使用這些混合來建立此元件的最終 CSS 輸出。您可以自行使用混合，從我們的元件中建立自己的類別結構。

show-for

@include show-for($size);

預設隱藏元素，僅在超過特定螢幕尺寸時顯示。

參數	類型	預設值	說明
`$size`	關鍵字	`無`	要使用的中斷點。必須是 `$breakpoints` 中定義的中斷點。

show-for-only

@include show-for-only($size);

預設隱藏元素，僅在特定中斷點內顯示。

參數	類型	預設值	說明
`$size`	關鍵字	`無`	要使用的中斷點。必須是 `$breakpoints` 中定義的中斷點。

hide-for

@include hide-for($size);

預設顯示元素，並在超過特定螢幕尺寸時隱藏。

參數	類型	預設值	說明
`$size`	關鍵字	`無`	要使用的中斷點。必須是 `$breakpoints` 中定義的中斷點。

hide-for-only

@include hide-for-only($size);

預設顯示元素，並在超過特定螢幕尺寸時隱藏。

參數	類型	預設值	說明
`$size`	關鍵字	`無`	要使用的中斷點。必須是 `$breakpoints` 中定義的中斷點。