今天我想提醒一下重要的主题 - 辅助功能。这是一个社区驱动的
努力让数字访问变得更容易。
这个主题的一小部分是排版。文本在任何浏览器字体大小下都应该看起来不错。
100% | 200% |
---|---|
@@##@@ | @@##@@ |
我知道,我们都这么做了,互联网上很多人在他们的课程中使用它。但这是一个糟糕的方法。如果您不确定选择哪个单位,这里有一个简单的规则:
px - 不会改变的固定大小元素,例如边框或阴影。
rem - 字体大小,以便更改浏览器默认字体大小的用户可以访问。
vw / vh - 元素大小与视口大小一致
% - 元素大小遵循相对大小
我们所需要的只是clamp()以使其可访问和公式
使其响应。
html { font-size: 16px; /* 1 rem */ line-height: 1.2; }
定义最小和最大屏幕尺寸,在我的例子中为 320 px - 1920 px。
定义您希望在最小和最大屏幕上显示的文本大小。在我的示例中,我有 h1 标签,所以我的
字体大小将分别为 50px 和 90px。
转到 https://utopia.fyi/type/calculator 并在其中输入您的值
屏幕”加载=“懒惰”宽度=“800”高度=“177”>
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); }
结果:
320px | 1920px | 1920px(200% zoom) |
---|---|---|
@@##@@ | @@##@@ | @@##@@ |
您可以看到,通过 1 行 css,我的文本即可响应并可进行浏览器缩放。
我的目的是尽可能快速、灵活地创建灵活的 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 不会使您的网站具有响应能力 - 原因如下
流体版式
以上就是网络可访问性:可访问的流体版式的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号