网站可访问性一直很重要，但如今，当我们拥有来自大多数国家/地区的政府的明确标准和法规时，支持这些标准并使我们的项目尽可能易于访问变得更加重要。
W3C 建议提供 3 级一致性A：AA和AAA. 为了达到这个AA 水平，除其他要求外，我们必须提供一种增加网站字体大小的方法：
1.4.4调整文本大小：除了文字的标题和图像外，无需辅助技术即可将文本大小调整至 200%，而不会丢失内容或功能。（AA级）
让我们看看解决方案，并尝试找到最好的解决方案。
更新（09/25/17）：事实证明，除了用户代理提供的之外，WCAG 不需要调整文本大小的自定义解决方案。我们只需要确保网站在调整大小后看起来还不错。然而，如果我们出于任何原因仍然想缩放元素，下面是对不同方法的全面分析。
不完整的解决方案：CSSzoom
当我们谈论改变尺寸时，第一个出现的词是缩放。CSS 有一个zoom属性，它完全符合我们的要求——增加大小。
让我们看一下一种常见的设计模式（我们将在本文的其余部分使用）：在某个断点处变成菜单图标的水平导航栏：
下面的 GIF 显示了我们通过zoom应用于菜单元素的方法得到的结果。我创建了一个切换器，它允许选择不同的尺寸并应用适当的缩放级别：
菜单超出了可见区域，因为我们不能通过缩放以编程方式增加视口宽度，也不能因为要求包装菜单。菜单图标也没有出现，因为屏幕大小实际上并没有改变，它和我们点击切换器之前一样。
zoom此外， Firefox 根本不支持所有这些问题。
错误的解决方案：缩放变换
transform: scale我们可以得到与使用得到的效果大致相同的效果zoom。除了，transform被浏览器更广泛地支持。尽管如此，我们还是遇到了与我们遇到的完全相同的问题zoom：菜单不适合可见区域，更糟糕的是，它也超出了垂直可见区域，因为页面布局是基于初始 1 因子比例计算的。
另一个不完整的解决方案： rem和html font-size
rem我们可以使用页面上所有元素的大小单位，而不是缩放或缩放。然后我们可以通过改变html元素的font-size属性来改变它们的大小，因为根据它的定义1rem等于html's 的font-size值。
这是一个相当好的解决方案，但不是很完美。正如您在以下演示中看到的那样，它与前面的示例存在相同的问题：在某一时刻，它不适合水平放置，因为所需的空间增加了，但视口宽度保持不变。
从某种意义上说，问题在于媒体查询无法适应大小的变化。当我们增加大小时，媒体查询应该相应地调整，以便在大小改变之前，相对于内容，相同位置的效果会发生。
工作解决方案：使用 Sass 模拟浏览器缩放mixin
为了寻找灵感，让我们看看原生浏览器缩放功能是如何处理这个问题的：
哇！Chrome 知道缩放确实会改变视口。缩放越大，视口越窄。这意味着我们的媒体查询实际上会像我们期望和需要的那样生效。
实现这一点的一种方法（不依赖原生缩放，因为我们无法按照 AA 的要求访问页面上的控件）是在每次切换字体大小时以某种方式更新媒体查询值。
例如，假设我们有一个媒体查询断点，1024px我们执行200%缩放。我们应该更新该断点以2048px补偿新的大小。
这不应该很容易吗？我们不能只用单位设置媒体查询，rem以便当我们增加font-size媒体查询时自动调整？可悲的是，这种方法行不通。尝试在这支Penpx中将媒体查询从 更新为，并看到没有任何变化。增加大小后布局不会切换断点。这是因为，根据标准，媒体查询中的和单位都是根据 元素的初始值计算的，该初始值通常是（并且可以变化）。remrememhtmlfont-size16px
媒体查询中的相对单位基于初始值，这意味着单位从不基于声明的结果。例如，在 HTML 中，
em单位相对于 ' 的初始值font-size。
我们可以使用 Sassmixin的力量来解决这个问题！我们将这样做：
- 我们将为
html每个尺寸的元素使用一个特殊的类（font-size--s,font-size--m,font-size--l,font-size--xl, 等） - 我们将使用一个特殊的
mixin，它为断点和大小的每个组合创建一个媒体查询规则，并考虑到屏幕宽度和应用于html元素的修饰符类 - 我们将
mixin在任何我们想要应用媒体查询的地方包装代码。
这是它的mixin外观：
$desktop: 640px;
$m: 1.5;
$l: 2;
$xl: 4;
// the main trick is here. We increase the min-width if we increase the font-size
@mixin media-desktop {
html.font-size--s & {
@media (min-width: $desktop) {
@content;
}
}
html.font-size--m & {
@media (min-width: $desktop * $m) {
@content;
}
}
html.font-size--l & {
@media (min-width: $desktop * $l) {
@content;
}
}
html.font-size--xl & {
@media (min-width: $desktop * $xl) {
@content;
}
}
}
.menu {
@include media-desktop {
&__mobile {
display: none;
}
}
}以及它生成的 CSS 示例：
@media (min-width: 640px) {
html.font-size--s .menu__mobile {
display: none;
}
}
@media (min-width: 960px) {
html.font-size--m .menu__mobile {
display: none;
}
}
@media (min-width: 1280px) {
html.font-size--l .menu__mobile {
display: none;
}
}
@media (min-width: 2560px) {
html.font-size--xl .menu__mobile {
display: none;
}
}因此，如果我们有 n 个断点和 m 个大小，我们将生成 n 倍于 m 个媒体查询规则，这将涵盖所有可能的情况，并且将使我们能够在字体大小增加时使用增加的媒体查询。
查看下面的 Pen 以了解其工作原理：
缺点
不过也有一些缺点。让我们看看如何处理它们。
增加了媒体查询选择器的特异性。
媒体查询中的所有代码都获得了额外的特异性，因为它进入了html.font-size — x选择器。因此，如果我们采用移动优先的方法并使用，例如，.no-margin在元素上使用修饰符，那么桌面普通样式可以胜过修饰符，并且将应用桌面边距。
为了避免这种情况，我们可以为移动设备创建相同的内容，并使用我们的桌面和移动 CSS 代码mixin进行包装。mixins这将平衡特异性。
其他方法是通过人为地增加特异性或创建mixin所需的功能（在我们的示例中没有边距）以单独的方法处理每个特殊情况，并且不仅将其用于移动设备，而且将其放入每个断点代码中。
生成的 CSS 数量增加。
生成的 CSS 数量会更高，因为我们为每种尺寸生成相同的 CSS 代码。
如果使用 gzip 压缩文件（通常是这种情况），这应该不是问题，因为它可以很好地处理重复代码。
一些前端框架，如 Zurb Foundation，在 JavaScript 实用程序和 CSS 媒体查询中使用内置断点。
这是一个艰难的过程。就个人而言，我尽量避免依赖于屏幕宽度的框架功能。经常被忽略的主要是网格系统，但随着 flexbox 和网格的兴起，我认为它不再是一个问题。查看这篇精彩的文章，了解有关如何构建自己的网格系统的更多详细信息。
但是如果一个项目依赖于这样的框架，或者我们不想解决特异性问题但仍然想使用AA，那么我会考虑摆脱固定高度的元素并rems与改变html元素一起使用font-size来更新相应的布局和文本尺寸。
感谢您的阅读！请让我知道这是否有帮助以及您遇到的符合 1.4.4 调整大小文本 W3C 可访问性要求的其他问题。
via https://css-tricks.com/best-way-programmatically-zoom-web-application/
