网络可访问性：可访问的流体版式

• 简介
• 首先：字体大小：20px - 不好的做法
• 如何制作无障碍的流畅文本
• 10 分钟内的版式组件
• 灵感来自

介绍

今天我想提醒一下重要的主题 - 辅助功能。这是一个社区驱动的
努力让数字访问变得更容易。

这个主题的一小部分是排版。文本在任何浏览器字体大小下都应该看起来不错。

100%	200%

首先：字体大小：20px - 不好的做法

我知道，我们都这么做了，互联网上很多人在他们的课程中使用它。但这是一个糟糕的方法。如果您不确定选择哪个单位，这里有一个简单的规则：

px - 不会改变的固定大小元素，例如边框或阴影。

rem - 字体大小，以便更改浏览器默认字体大小的用户可以访问。

vw / vh - 元素大小与视口大小一致

% - 元素大小遵循相对大小

如何制作无障碍的流畅文本

我们所需要的只是clamp()以使其可访问和公式
使其响应。

1. 确保将全局字体大小设置为 16px。并且行高至少为 1.2

html {
  font-size: 16px; /* 1 rem */
  line-height: 1.2;
} 

1. 定义最小和最大屏幕尺寸，在我的例子中为 320 px - 1920 px。

2. 定义您希望在最小和最大屏幕上显示的文本大小。在我的示例中，我有 h1 标签，所以我的
   字体大小将分别为 50px 和 90px。

3. 前往 https://utopia.fyi/type/calculator 并输入您的值

1. 向下滚动到 CSS 生成器。我们需要 --step-0 值

   Copy
   /* @link https://utopia.fyi/type/calculator?c=320,50,1.2,1920,90,1.25,2,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
--step--2: clamp(2.1701rem, 1.8842rem + 1.4299vw, 3.6rem);
--step--1: clamp(2.6042rem, 2.225rem + 1.8958vw, 4.5rem);
--step-0: clamp(3.125rem, 2.625rem + 2.5vw, 5.625rem);
--step-1: clamp(3.75rem, 3.0938rem + 3.2813vw, 7.0313rem);
--step-2: clamp(4.5rem, 3.6422rem + 4.2891vw, 8.7891rem);
}

1. 夹钳(3.125rem, 2.625rem 2.5vw, 5.625rem);作为文本的字体大小。

结果：

320px	1920px	1920px(200% zoom)

您可以看到，通过 1 行 css，我的文本即可响应并可进行浏览器缩放。

10 分钟内的版式组件

我的目的是尽可能快速、灵活地创建灵活的 Typography 组件。

我拍摄了最大的 h1 文本。前往 https://utopia.fyi/type/calculator 并生成 8 个缩小步骤：

这将是我的 p、h1-6、span 和标签文本大小

html {
  font-size: 16px; /* 1 rem */
  line-height: 1.2;
} 

然后再玩 5 分钟 React，瞧：

我的 React 可重用版式组件

灵感来自

使用 REM 不会使您的网站具有响应能力 - 原因如下

流体版式

以上是网络可访问性：可访问的流体版式的详细内容。更多信息请关注PHP中文网其他相关文章！