简介首先：字体大小：20px – 不好的做法如何制作无障碍的流畅文本10 分钟内的版式组件灵感来自
介绍
今天我想提醒一下重要的主题 – 辅助功能。这是一个社区驱动的
努力让数字访问变得更容易。
这个主题的一小部分是排版。文本在任何浏览器字体大小下都应该看起来不错。
@@##@@@@##@@
首先：字体大小：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);作为文本的字体大小。
结果：
@@##@@@@##@@@@##@@
您可以看到，通过 1 行 css，我的文本即可响应并可进行浏览器缩放。
现代化家居响应式网站模板1.0
现代化家居响应式网站模板源码是以cmseasy进行开发的家居网站模板。该软件可免费使用，模板附带测试数据！模板源码特点：整体采用浅色宽屏设计，简洁大气，电脑手机自适应布局，大方美观，功能齐全，值得推荐的一款模板，每个页面精心设计，美观大方，兼容各大浏览器；所有代码经过SEO优化，使网站更利于搜索引擎排名，是您做环保类网站的明确选择。无论是在电脑、平板、手机上都可以访问到排版合适的网站，即便是微信等
0 查看详情
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 不会使您的网站具有响应能力 – 原因如下
流体版式
以上就是网络可访问性：可访问的流体版式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1151490.html
微信扫一扫 
支付宝扫一扫 
