28 puntos por xguru 2024-03-22 | 3 comentarios | Compartir por WhatsApp
  • Muchos sitios web como The New York Times, Medium y Substack usan breakpoints (como 768px) y cambian el tamaño de la fuente según ese criterio (1.125rem y 1.25rem)
  • Usando calc de CSS se puede escribir un valor parecido: calc(1.0625rem + 0.2604vw)
  • Si se redondea, se puede expresar como 1rem + 0.25vw. Por eso ahora uso el siguiente CSS en la mayoría de los sitios web
:root {  
  font-size: calc(1rem + 0.25vw);  
}  

3 comentarios

 
yanggitak 2024-03-25

Si se quiere implementar igual que el diseño en PC, quizá también habría que incluir en la fórmula una variable de CSS que excluya el ancho de la barra de desplazamiento. Tengo entendido que la unidad vw se basa en el ancho total, incluyendo el ancho de la barra de desplazamiento.

En casos como la imagen completa, donde incluso los márgenes de los elementos alrededor deben aumentar o disminuir con la misma proporción, también podría servir como referencia la forma de configurar la fuente del siguiente sitio. En el caso del Galaxy Fold (320px) o de monitores de alta resolución, también parece razonable aplicar límites adecuados con breakpoints.
https://amerimnos.github.io/coding-playground/reponsive-css-trick-vw/

 
cometkim 2024-03-22

Es una aproximación útil, pero es difícil que reemplace por completo los breakpoints que se usan en la tipografía fluida real.

Por lo general, clamp(min_rem, calc_relative_vw, max_rem) se aplica de forma distinta en cada breakpoint según la legibilidad del contenido y la forma del contenedor; si se intenta resolver todo con una sola fórmula, se vuelve difícil cubrir form factors poco comunes.

Por ejemplo, entornos como ventanas emergentes de Android, monitores 21:9 o dispositivos HMD.

 
nemorize 2024-03-23

No sé mucho sobre cosas como los pop-ups de Android o los HMD...
¿para casos como 21:9 no estaría bien usar también vh?
Algo como calc(1rem + min(1vw, 1vh) * 0.25).