Foundation - 可见性类
描述
Foundation 使用可见性类根据设备方向(纵向和横向)或屏幕尺寸(小、中、大或超大屏幕)显示或隐藏元素。
它允许用户根据浏览环境使用元素。
下表列出了 Foundation 的可见性类，它们根据浏览环境控制元素 −
Foundation 支持一些类，您可以使用 .hide 和 .invisible 类隐藏内容，并且在页面上不显示任何内容。
方向检测
设备可以确定通过使用横向和纵向功能，可实现不同的方向。手持设备(例如手机)在旋转时会指定不同的方向。对于桌面，方向将始终为横向。
可访问性
下表列出了屏幕阅读器的可访问性技术，这些技术可隐藏内容，同时使屏幕阅读器可读 −
| Sr.No. | 可访问性类别 &描述 |
|---|---|
| 1 | 显示屏幕阅读器
它使用 show-for-sr 类来隐藏内容，同时阻止屏幕阅读器读取内容。 |
| 2 | 隐藏屏幕阅读器
它使用 aria-hidden 属性，使文本可见，但屏幕阅读器无法读取。 |
| 3 | 创建跳过链接
屏幕阅读器将创建跳过链接以导航到您网站的内容。 |
Sass 参考
Foundation 使用以下 mixin 来显示 CSS 输出，这允许为您的组件构建自己的类结构 −
| Sr.No. | Mixin &描述 | 参数 | 类型 |
|---|---|---|---|
| 1 |
show-for 默认情况下，它会隐藏一个元素并将其显示在特定屏幕尺寸之上。 |
$size | 关键字 |
| 2 |
show-for-only 默认情况下，它会隐藏一个元素并将其显示在断点内。 |
$size | 关键字 |
| 3 |
hide-for 默认情况下，它会显示一个元素，并在某个屏幕尺寸以上隐藏它。 |
$size | 关键字 |
| 4 |
hide-for-only 默认情况下，它会显示一个元素，并在某个屏幕尺寸以上隐藏它。 |
$size | 关键字 |
所有这些 mixin 的默认值将设置为无。
