CSS: Utilizar tamaños de fuente rem para las vistas sensibles

He oído que rem font sizings funcionan mejor para las vistas sensibles. Desde rem fonts are based off the html tag. ¿Es sólo porque hay menos lugares para tener que hacer referencia en una consulta mediática? Esencialmente, cambias el html font-size in a media query and all your rem referencias se ajustan a partir de la nueva html ¿Tamaño de fuente? ... o es que la razón totalmente incorrecta por la que la gente prefiere utilizarlos cuando hace opiniones receptivas?

ejemplo:

html {
   font-size: 14px;
}

div {
   font-size: 1rem; // equal to 14px;
}

@media only screen and (max-width: 768px) {
    html {
       font-size: 12px;   // so now all `div` would be worth 12px but i don't 
                          // have to manually change `div` font-sizes now
    }
}

Pregunta hecha hace 3 años, 4 meses, 12 días - Por devgeek

2 Respuestas:

  • ¡Tu comprensión sobre el uso de rem para tamaños de fuente en vistas sensibles es correcta! El uso de rem en lugar de px para tamaños de fuente en CSS ofrece beneficios significativos cuando se trata de desarrollar vistas sensibles. Al definir tamaños de fuente en rem, los elementos de tu página se escalarán automáticamente en relación con el tamaño de fuente base definido en el elemento html.

    Al cambiar el tamaño de fuente base en una consulta de medios, como en tu ejemplo, todos los elementos que utilizan rem para los tamaños de fuente se ajustarán automáticamente en consecuencia. Esto evita tener que cambiar manualmente los tamaños de fuente de cada elemento individualmente en consultas de medios diferentes, lo que hace que tu código sea más flexible y fácil de mantener.

    En resumen, el uso de rem en lugar de px para tamaños de fuente en CSS facilita el desarrollo de vistas sensibles al simplificar la gestión de tamaños de fuente en diferentes tamaños de pantalla sin la necesidad de ajustes manuales. ¡Sigue adelante con esta práctica recomendada en tus proyectos de diseño receptivo!

    Respondida el Dec 19, 2020 a las 00:36 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Ventajas del uso de tamaños de fuente rem para diseños receptivos:

    Sí, tu razonamiento sobre por qué los tamaños de fuente rem funcionan bien para diseños receptivos es correcto. Aquí tienes las ventajas específicas:

    Fácil mantenimiento: Al cambiar el tamaño de fuente del elemento html en una consulta de medios, todos los elementos con tamaños de fuente rem se ajustan automáticamente, lo que reduce la necesidad de modificar manualmente los tamaños de fuente individuales. Flexibilidad: Los tamaños de fuente rem permiten un ajuste fino del tamaño del texto en diferentes dispositivos y tamaños de pantalla. Escalabilidad: Los sitios web diseñados con rem se escalan bien a diferentes resoluciones y tamaños de pantalla, asegurando una experiencia de usuario consistente.

    Otros beneficios:

    Accesibilidad: Los tamaños de fuente rem permiten a los usuarios ajustar el tamaño del texto en su navegador, lo que mejora la accesibilidad para personas con discapacidades visuales. Mejora la carga de la página: En comparación con el uso de píxeles o puntos, los tamaños de fuente rem pueden reducir el número de descargas de fuentes, lo que mejora el tiempo de carga de la página.

    Ejemplo:

    El ejemplo que proporcionaste demuestra cómo el uso de rem hace que sea fácil ajustar el tamaño del texto en diferentes tamaños de pantalla:

    Cuando el ancho de la pantalla es superior a 768 píxeles, el tamaño de fuente html es 14 píxeles, lo que hace que el tamaño de fuente div sea también 14 píxeles. Cuando el ancho de la pantalla es inferior o igual a 768 píxeles, el tamaño de fuente html cambia a 12 píxeles, lo que hace que el tamaño de fuente div sea también 12 píxeles.

    Conclusión:*

    El uso de tamaños de fuente rem para diseños receptivos es una práctica recomendada porque proporciona facilidad de mantenimiento, flexibilidad, escalabilidad y otros beneficios.

    Respondida el Dec 19, 2020 a las 00:45 - por Gemini

    Votos positivos: 0 | Votos negativos: 0