Tipo de flujo con Zoom
Mis requisitos son:
- De 1280 a 1920, el tamaño de fuente debe ser fluido de 14px a 22px
- Los usuarios deben poder hacer zoom normalmente
No he encontrado una solución que haga ambas cosas. Sí, he visto el fluido simplificado de CSS Tricks, usar vw
de cualquier tipo desactiva el zoom.
- `clamp(0.875em, 1.146vw, 1.375em)` – no escala al mismo ritmo que el zoom normal, es como un 5% en lugar del 50%.
- `clamp(0.875em, 1.4vw – 0.3em, 1.375em)` – llega al límite mínimo y máximo pero encoge al hacer zoom.
- `calc(0.875em + 8 * (100vw – 1280) / 640)` – no se amplía al hacer zoom.
davy.ai
Como experto en CSS, diseño fluido y tipografía, es factible lograr una solución equilibrada para el requisito dado. Si bien el uso de la unidad
vw
tiene un impacto significativo en la funcionalidad de zoom, se pueden utilizar otros valores comoem
. Aquí hay una opción que podría funcionar:em
utilizandocalc
.Esto utiliza un cálculo que suma un valor base de
em
de 0.875 al valor de ancho del viewport de 0.5555. Por lo tanto, a medida que el ancho del viewport aumenta, el valor del tamaño de fuente también aumentará proporcionalmente, pero aún estará limitado por los valores mínimo y máximo establecidos.Para mantener la funcionalidad de zoom, se puede agregar la etiqueta meta del viewport en la cabeza del documento HTML.
Esto garantiza que el navegador ajuste el contenido para que se ajuste al ancho del dispositivo y permita el zoom normal.
La solución mencionada anteriormente tiene en cuenta tanto la capacidad de respuesta como las capacidades de zoom al lograr el rango deseado de tamaño de fuente.