Foundation教程

Foundation 可见性类

说明

Foundation 使用可见性类根据设备方向(纵向和横向)或屏幕尺寸(小、中、大或超大屏幕)显示或隐藏元素。 它允许用户根据浏览环境使用元素。
下表列出了 Foundation 的可见性类,它们根据元素的浏览环境控制元素-
可见性类和描述
按屏幕尺寸显示
使用 .show类显示基于设备的元素。
按屏幕大小隐藏
使用 .hide类隐藏基于设备的元素。
Foundation 支持一些类,您可以在其中使用 .hide.invisible 类隐藏内容,并且在页面上不显示任何内容。

方向检测

设备可以通过使用 横向纵向功能来确定不同的方向。手机等手持设备在旋转时会指定不同的方向。对于桌面,方向将始终为横向。

可访问性

下表列出了屏幕阅读器的可访问性技术,这些技术隐藏内容,同时让屏幕阅读器可读-
辅助功能类和描述
为屏幕阅读器显示
它使用 show-for-sr 类来隐藏内容,同时防止屏幕阅读器从阅读它。
为屏幕阅读器隐藏
它使用 aria-hidden 属性使文本可见但无法被阅读屏幕阅读器。
创建跳过链接
屏幕阅读器将创建一个跳过链接以导航到您网站的内容。

Sass 参考

Foundation 使用以下混合来显示 CSS 输出,这允许为您的组件构建自己的类结构-
混合和描述 参数 输入
show-for
默认情况下,它隐藏一个元素并在特定屏幕尺寸以上显示它。
$size 关键字
show-for-only
默认情况下,它隐藏一个元素并在断点内显示它。
$size 关键字
hide-for
默认情况下,它显示一个元素并将其隐藏在特定屏幕尺寸之上。
$size 关键字
hide-for-only
默认情况下,它显示一个元素并将其隐藏在特定屏幕尺寸之上。
$size 关键字
所有这些 mixin 的默认值都将设置为 none
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4