Foundation使用可见性类根据设备方向(纵向和横向)或屏幕显示或隐藏元素尺寸(小，中，大或xlarge屏幕).
它允许用户根据浏览环境使用元素.
下表列出了Foundation的可见性类，它根据浏览环境控制元素 :
| Sr.No. | 可视性等级&说明 |
|---|---|
| 1 | 按屏幕大小显示 它使用 .show 类显示基于设备的元素. |
| 2 | 按屏幕大小隐藏 它使用 .hide class. |
Foundation支持一些可以使用隐藏内容的类 .hide 和 .invisible 类并且在页面上不显示任何内容.
设备可以使用横向和纵向功能确定不同的方向.移动电话等手持设备在旋转时指定不同的方向.对于桌面，方向将始终为横向.
下表列出了屏幕阅读器的辅助功能，这些技术在制作内容时隐藏了内容屏幕阅读器可读 :
| Sr.No . | 辅助功能等级&说明 |
|---|---|
| 1 | 显示屏幕阅读器 它使用 show-for-sr 类隐藏内容，同时阻止屏幕阅读器阅读它. |
| 2 | 隐藏屏幕阅读器 它使用 aria-hidden 使文本可见但屏幕阅读器无法读取的属性. |
| 3 | 创建跳过链接 屏幕阅读器将创建一个跳过链接以获取导航到您网站的内容. |
Foundation使用以下mixins来显示CSS输出，它允许为你的组件构建自己的类结构ents :
| Sr.No. | Mixin&说明 | 参数 | 输入 |
|---|---|---|---|
| 1 | show- for 默认情况下，它会隐藏一个元素并将其显示在特定屏幕尺寸之上. | $ size | 关键字 |
| 2 | show-for-only 默认情况下，它会隐藏一个元素并在断点内显示它. | $ size | 关键字 |
| 3 | hide-for 默认情况下，它显示一个元素并将其隐藏在特定屏幕尺寸之上. | $ size | 关键字 |
| 4 | hide-for-only 默认情况下，它显示一个元素并将其隐藏为ab超过一定的屏幕大小. | $ size | 关键字 |
所有这些mixins的默认值将设置为 none .
