可见性类

可见性类允许您根据屏幕尺寸或设备方向显示或隐藏元素。您还可以使用可见性类来控制用户根据其浏览环境看到的元素。

可见性类使用 `!important` 来确保它们不会被更具体的 selectors 覆盖。此框架有意避免使用 `!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" 使其可聚焦。（或者，如果用户也应该能够使用 Tab 键切换到该元素，则将其设置为 0。另请参阅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>

黑暗中很可怕。

你能看到光明。

粘性模式检测

如果您正在使用粘性插件，则当 Sticky 组件粘贴时，这些类可以帮助您显示和隐藏元素。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` 中定义的断点。