Topics

Para ajustar los márgenesclamp()Hoy en día se utilizan comúnmente implementaciones que permiten que el valor varíe entre un valor mínimo y un valor máximo.

Es muy útil para el diseño responsivo,Zoom de accesibilidadCon eso en mente, hay un pequeño inconveniente.

Ejemplos comunes de abrazadera()

Por ejemplo, los márgenesclamp()Si quieres ajustarlo, probablemente lo escribirías así:

: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)
  );
}

No entraré en detalles, pero

• En teléfonos inteligentes--spacing-lg-minTamaño
• En PC--spacing-lg-maxTamaño
• Durante este tiempo, se expande y contrae de forma suave y variable.

Así que es un patrón muy fácil de utilizar.

¿Cuáles son los peligros de la accesibilidad?

El problema es queCriterio de cumplimiento WCAG 2.0 1.4.4 "Cambiar el tamaño del texto"Es hora de intentar responder.

Este estándar se estableció originalmente antes de que los teléfonos inteligentes se volvieran comunes, con la intención de permitir que las imágenes se vieran incluso ampliadas hasta un 200% en una PC, pero las mismas condiciones se aplican a los navegadores de los teléfonos inteligentes.

De hecho, este fenómeno tiende a ocurrir cuando se hace zoom al 200% en un teléfono inteligente.

1. Al ampliar (zoom) el texto,remBasado en unidadesExpandirse hasta los márgenesAl final termina sucediendo.
2. Esto le permite crear unaMárgenes excesivamente ampliosSe vuelve así.
3. Como resultado,El área de visualización del contenido es extremadamente estrecha.Esto puede generar un diseño distorsionado y dificultar la lectura de la página.

*Sin embargo, en realidad, incluso al analizar sitios web gubernamentales extranjeros donde el cumplimiento de las WCAG es obligatorio, parece que no están haciendo mucho. Esto probablemente se deba a problemas de rentabilidad y a que, en primer lugar, parece haber poca necesidad de una ampliación del 200 % en los teléfonos inteligentes, por lo que, a nivel de campo, se podría considerar que "no será un gran problema si no lo hacemos".

¿Cómo solucionar este problema?

Afectado por la ampliación del textoremEn cambio,vwUtilice unidades basadas en la ventana gráfica, comoNo haga los márgenes más grandes de lo necesario, incluso cuando haga zoom.Es importante hacerlo.

perovwSi solo especificaclamp()Esto no aprovecha la ventaja de poder controlar los valores mínimos y máximos.

Ahí es dondemin()Es una función!

min()Se utilizará el valor más pequeño entre los valores pasados. Esta característica permite alternar el valor aplicado entre los modos normal y expandido.

Aquí te explicamos cómo escribirlo.

--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)
  )
);

Cuando esto se muestra a 375 px CSS, el primer valor de min es--spacing-lg-minEl valor de 24px se convierte a vw, lo que da como resultado 6,4vw.

clamp()El valor mínimo es 1,5rem = 24px, pero cuando se amplía al 200%, se convierte en 48px, por lo que el 6,4vw de la izquierda es más pequeño y se aplicará.

En otras palabras,

• Normalmente (100%):
  • clamp()El valor devwSerá menor que el valor de referencia.
  • min()Dado que se utiliza el más pequeño,clamp()es efectivo y la visualización cambiará dependiendo del ancho de la pantalla.
• Ampliado (200%):
  • clamp()Dentroremse hace más grande con la expansión,vwEl valor de referencia es menor.
  • vwSe aplica el valor estándar y los márgenes se fijan como un porcentaje del ancho de la pantalla, evitando una ampliación excesiva.

Ahora, "Conveniencia receptiva"y"Consideraciones de accesibilidad"¡Puedes lograr ambas cosas!

*Por cierto, al visualizar en una PC, a menudo es mejor ampliar la imagen, incluidos los márgenes, para mantener el equilibrio del diseño.--clamp-viewport-minEsta norma se aplica únicamente a los teléfonos inteligentes.

Comparar el comportamiento real

La parte superior es solo abrazadera, la parte inferior es min + abrazadera.

Si amplías la imagen al 200% en tu teléfono inteligente, podrás ver claramente la diferencia.

* Puede ampliar la página haciendo clic en el icono de la izquierda de la barra de direcciones en Safari de iOS y en el icono de la parte superior derecha en Chrome de Android.

resumen

• clamp() es útil para ajustes de margen responsivos
• Sin embargo, si amplía la imagen, es posible que se expanda hasta los márgenes, lo que puede causar problemas de diseño.
• Combinado con min(),Variable cuando es normal, controlado cuando está agrandadoEsto permite una respuesta equilibrada.

Si es consciente del cumplimiento de las WCAG, le tranquilizará incorporar estas implementaciones. Las implementaciones que "prestan atención al aumento del 200 % en los teléfonos inteligentes" aún son poco frecuentes, pero reducen los riesgos de accesibilidad sin comprometer la legibilidad normal.

Por cierto, si desea realizar ajustes más finos además de los márgenes, también puede especificar consultas de medios para puntos de interrupción más estrechos.

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

Por ejemplo, si amplía una pantalla de 375 px de ancho al 200 %, el navegador calculará el ancho de la ventana gráfica como "la mitad de ese tamaño (aproximadamente 188 px)" para poder cumplir con esta condición estrecha.

*El valor de 239 px es solo un ejemplo. Debe elegir un valor que permita ampliar la pantalla en el futuro, ajustándolo para que no afecte la visualización normal.

La combinación de "clamp() + min()" con "consultas de medios de punto de interrupción estrecho" permite un soporte de accesibilidad más flexible y confiable.