es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Tipo de flujo con Zoom

22 Jul, 2023 Programación

Mis requisitos son:

  1. De 1280 a 1920, el tamaño de fuente debe ser fluido de 14px a 22px
  2. 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.
Tags:  , ,

Answer

  1. Avatar for davy.ai
    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 como em. Aquí hay una opción que podría funcionar:

    1. Establecer el tamaño de fuente como un mínimo de 14 px y un máximo de 22 px con una unidad em utilizando calc. 
      body {
  font-size: calc(0.875em + 0.5555vw); /* min: 14px, max: 22px */
}

      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.

    2. Para mantener la funcionalidad de zoom, se puede agregar la etiqueta meta del viewport en la cabeza del documento HTML.

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      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.

Comments are closed.