- 简介
- 首先：字体大小：20px - 不好的做法
- 如何制作无障碍的流畅文本
- 10 分钟内的版式组件
- 灵感来自
介绍
今天我想提醒一下重要的主题 - 辅助功能。这是一个社区驱动的
努力让数字访问变得更容易。
这个主题的一小部分是排版。文本在任何浏览器字体大小下都应该看起来不错。
| 100% | 200% |
|---|---|
| @@##@@ | @@##@@ |
首先：字体大小：20px - 不好的做法
我知道，我们都这么做了，互联网上很多人在他们的课程中使用它。但这是一个糟糕的方法。如果您不确定选择哪个单位，这里有一个简单的规则：
px - 不会改变的固定大小元素，例如边框或阴影。
rem - 字体大小，以便更改浏览器默认字体大小的用户可以访问。
vw / vh - 元素大小与视口大小一致
% - 元素大小遵循相对大小
如何制作无障碍的流畅文本
我们所需要的只是clamp()以使其可访问和公式
使其响应。
- 确保将全局字体大小设置为 16px。并且行高至少为 1.2
html {
font-size: 16px; /* 1 rem */
line-height: 1.2;
}
定义最小和最大屏幕尺寸，在我的例子中为 320 px - 1920 px。
定义您希望在最小和最大屏幕上显示的文本大小。在我的示例中，我有 h1 标签，所以我的
字体大小将分别为 50px 和 90px。转到 https://utopia.fyi/type/calculator 并在其中输入您的值
屏幕”加载=“懒惰”宽度=“800”高度=“177”>
- 向下滚动到 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);
}
- 放置夹具(3.125rem, 2.625rem 2.5vw, 5.625rem);作为文本的字体大小。
结果：
| 320px | 1920px | 1920px(200% zoom) |
|---|---|---|
| @@##@@ | @@##@@ | @@##@@ |
您可以看到，通过 1 行 css，我的文本即可响应并可进行浏览器缩放。
10 分钟内的版式组件
我的目的是尽可能快速、灵活地创建灵活的 typography 组件。
我拍摄了最大的 h1 文本。转到https://utopia.fyi/type/calculator并生成8个降级步骤：
屏幕”加载=“懒惰”宽度=“800”高度=“458”>
这将是我的 p、h1-6、span 和标签文本大小
--size-text-s: clamp(0.7268rem, 0.6834rem + 0.2169vw, 0.9437rem);
--size-text-m: clamp(0.8721rem, 0.8106rem + 0.3075vw, 1.1796rem);
--size-text-l: clamp(1.0466rem, 0.961rem + 0.428vw, 1.4746rem);
--size-h6: clamp(1.2559rem, 1.1384rem + 0.5873vw, 1.8432rem);
--size-h5: clamp(1.507rem, 1.3476rem + 0.797vw, 2.304rem);
--size-h4: clamp(1.8084rem, 1.5941rem + 1.0716vw, 2.88rem);
--size-h3: clamp(2.1701rem, 1.8842rem + 1.4299vw, 3.6rem);
--size-h2: clamp(2.6042rem, 2.225rem + 1.8958vw, 4.5rem);
--size-h1: clamp(3.125rem, 2.625rem + 2.5vw, 5.625rem);
然后再玩 5 分钟 react，瞧：
我的 react 可重用版式组件
灵感来自
使用 rem 不会使您的网站具有响应能力 - 原因如下
流体版式
