Topics

调整边距clamp()目前普遍采用允许值在最小值和最大值之间变化的实现方式。

它对于响应能力非常有用，无障碍缩放考虑到这一点，就会发现有点棘手。

clamp() 的常见示例

例如，边距clamp()如果你想调整它，你可能会这样写：

:root {
  --clamp-base: 16;
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1440;

  --spacing-lg-min: 24;
  --spacing-lg-max: 48;

  --spacing-lg-slope: calc(
    (var(--spacing-lg-max) - var(--spacing-lg-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min))
  );
  --spacing-lg-intersection: calc(
    (var(--spacing-lg-max) - var(--clamp-viewport-max) * var(--spacing-lg-slope)) / var(--clamp-base)
  );
  --spacing-lg: clamp(
    calc(var(--spacing-lg-min) / var(--clamp-base) * 1rem),
    calc(var(--spacing-lg-intersection) * 1rem + 100 * var(--spacing-lg-slope) * 1vw),
    calc(var(--spacing-lg-max) / var(--clamp-base) * 1rem)
  );
}

我不会详述，但是

• 在智能手机上--spacing-lg-min尺寸
• 在PC上--spacing-lg-max尺寸
• 在此期间，它会平稳且多变地扩张和收缩。

所以这是一个非常容易使用的模式。

可访问性存在哪些缺陷？

问题是，WCAG 2.0 成功标准 1.4.4“调整文本大小”是时候尝试做出回应了。

该标准最初是在智能手机普及之前制定的，目的是允许即使在 PC 上将图像放大至 200% 也可以查看，但同样的条件也适用于智能手机浏览器。

事实上，当你在智能手机上放大到 200% 时，往往会出现这种现象。

1. 通过放大（缩放）文本，rem基于单位扩展到边缘它最终发生了。
2. 这允许您创建一个边距过宽就变成这样了。
3. 因此，内容显示区域极其狭窄。这可能会导致布局扭曲并使页面难以阅读。

*然而，实际上，即使放眼海外强制遵守WCAG标准的政府网站，似乎也并没有采取什么行动。这可能是出于成本效益考虑，而且智能手机上本来就没有必要放大200%，所以在现场层面，人们可能会认为“不做也没关系”。

如何解决这个问题？

受文本放大的影响rem反而，vw使用基于视口的单位，例如即使缩放，也不要将边距设置得过大这样做很重要。

但vw如果您仅指定clamp()这并没有利用能够控制最小值和最大值的优势。

这就是min()这是一个功能！

min()将使用传递的值中的“最小值”。使用此特性可以在正常模式和扩展模式之间切换应用的值​​。

以下是编写方法。

--spacing-lg: min(
  calc(var(--spacing-lg-min) / var(--clamp-viewport-min) * 100vw),
  clamp(
    calc(var(--spacing-lg-min) / var(--clamp-base) * 1rem),
    calc(var(--spacing-lg-intersection) * 1rem + 100 * var(--spacing-lg-slope) * 1vw),
    calc(var(--spacing-lg-max) / var(--clamp-base) * 1rem)
  )
);

当以 375 CSS 像素显示时，最小值的第一个值为--spacing-lg-min将24px的值转换为vw，结果为6.4vw。

clamp()最小值为1.5rem=24px，但放大200%后变为48px，因此左边的6.4vw较小，将适用。

换句话说，

• 通常时（100%表示）：
  • clamp()的价值vw它将小于参考值。
  • min()由于使用了较小的一个，clamp()有效，显示将根据屏幕宽度而变化。
• 放大（200%）：
  • clamp()之内rem随着扩张而变得更大，vw参考值较小。
  • vw应用标准值，并将边距固定为屏幕宽度的百分比，以防止过度放大。

现在， ”响应便捷“和”无障碍设施注意事项“您可以同时实现这两者！

*顺便说一句，在电脑上查看时，最好放大包括边距在内的图像以保持设计的平衡。--clamp-viewport-min该标准仅适用于智能手机。

比较实际行为

顶部仅为夹具，底部为最小夹具+夹具。

如果您在智能手机上放大到 200%，您就可以清楚地看到差异。

* iOS Safari 点击地址栏左侧图标可放大页面，Android Chrome 点击地址栏右上角图标可放大页面。

概括

• clamp() 对于响应边距调整很有用
• 但是，如果放大图像，它可能会扩展到边缘，从而导致布局问题。
• 与 min() 结合，正常时可变，扩大时可控制这可以实现平衡的响应。

如果您注重 WCAG 合规性，那么采用此类实现方式会让您安心。“注意智能手机上 200% 的放大率”的实现方式仍然很少见，但它们在不影响正常可读性的前提下降低了可访问性风险。

顺便说一句，如果您想进行除边距之外的更精细的调整，您还可以指定更窄断点的媒体查询。

@media (max-width: 239px) {
  /* 拡大時に適用したいCSS */
}

例如，如果将 375px 宽的屏幕放大到 200%，浏览器将计算视口宽度为“该尺寸的一半（大约 188px）”，以便能够匹配这种狭窄的条件。

※239px 的值仅为示例。请在调整时考虑未来屏幕放大的可能性，以免影响正常显示。

将“clamp() + min()”与“窄断点媒体查询”相结合，可以提供更灵活、更可靠的可访问性支持！