基础 - 可见性类（Visibility Classes）

优质

小牛编辑

127浏览

2023-12-01

描述 (Description)

下表列出了Foundation的可见性类，它根据浏览环境控制元素 -

Sr.No.	可见性等级和描述
1	按屏幕大小显示它使用.show类显示基于设备的元素。
2	按屏幕大小隐藏它使用.hide类隐藏基于设备的元素。

Foundation支持一些类，您可以使用.invisible和.invisible类隐藏内容，并在页面上不显示任何内容。

设备可以通过使用landscape和portrait功能来确定不同的方向。移动电话等手持设备在旋转时指定不同的方向。对于桌面，方向将始终为横向。

下表列出了屏幕阅读器的可访问性技术，这些技术隐藏了内容，同时使屏幕阅读器可以读取内容 -

Sr.No.	辅助功能类和描述
1	显示屏幕阅读器它使用show-for-sr类隐藏内容，同时阻止屏幕阅读器阅读。
2	隐藏屏幕阅读器它使用aria-hidden属性，使文本可见，但屏幕阅读器无法读取。
3	创建跳过链接屏幕阅读器将创建一个跳过链接，以获取您网站内容的导航。

Foundation使用以下mixins来显示CSS输出，它允许为您的组件构建自己的类结构 -

Sr.No.	Mixin和描述	参数	类型
1	show-for 默认情况下，它会隐藏元素并将其显示在特定屏幕大小之上。	$size	Keyword
2	show-for-only 默认情况下，它隐藏一个元素并在断点内显示它。	$size	Keyword
3	hide-for 默认情况下，它显示一个元素并将其隐藏在特定屏幕大小之上。	$size	Keyword
4	hide-for-only 默认情况下，它显示一个元素并将其隐藏在特定屏幕大小之上。	$size	Keyword

所有这些mixin的默认值将设置为none 。

Sr.No.	辅助功能类和描述
1	显示屏幕阅读器它使用show-for-sr类隐藏内容，同时阻止屏幕阅读器阅读。
2	隐藏屏幕阅读器它使用aria-hidden属性，使文本可见，但屏幕阅读器无法读取。
3	创建跳过链接屏幕阅读器将创建一个跳过链接，以获取您网站内容的导航。