網路可訪問性：可存取的流體版式

• 簡介
• 首先：字體大小：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中文網其他相關文章！