📅 最后修改于: 2020-10-25 05:55:00 🧑 作者: Mango
下表列出了Foundation的可见性类，这些类根据其浏览环境控制元素-
| Sr.No. | Visibility Class & Description |
|---|---|
| 1 | Show by Screen Size
It shows the elements based on the device by using .show class. |
| 2 | Hide by Screen Size
It hides the elements based on the device by using .hide class. |
基金会支持的一些课程，你可以隐藏通过.hide和.invisible类，不显示任何网页上的内容。
设备可以通过使用横向和纵向功能来确定不同的方向。诸如手机之类的手持设备在旋转时会指定不同的方向。对于台式机，方向始终为横向。
下表列出了屏幕阅读器的可访问性技术，该技术隐藏内容，同时使屏幕阅读器可以读取内容-
| Sr.No. | Accessibility Class & Description |
|---|---|
| 1 | Show for Screen Readers
It uses show-for-sr class to hide the content while preventing screen readers from reading it. |
| 2 | Hide for Screen Readers
It uses aria-hidden attribute which makes text visible but could not be read by a screen reader. |
| 3 | Creating Skip Links
Screen reader will create a skip link to get the navigation to your site’s content. |
Foundation使用以下mixin来显示CSS输出，从而允许为您的组件构建自己的类结构-
| Sr.No. | Mixin & Description | Parameter | Type |
|---|---|---|---|
| 1 | show-for
By default, it hides an element and displays it above certain screen size. |
$size | Keyword |
| 2 | show-for-only
By default, it hides an element and displays it within breakpoint. |
$size | Keyword |
| 3 | hide-for
By default, it shows an element and hides it above a certain screen size. |
$size | Keyword |
| 4 | hide-for-only
By default, it shows an element and hides it above a certain screen size. |
$size | Keyword |
所有这些mixin的默认值都将设置为none 。