Adaptando el cuerpo del texto a unidades relativas: El primer paso es cambiar las unidades de medida de font-size de píxeles (px) a unidades relativas como rem. Esto hará que el texto se adapte mejor a las configuraciones de usuario y los tamaños de pantalla. Abre tu archivo styles.css, busca los elementos de texto (como
o
) y convierte el font-size de píxeles a rem. Por ejemplo, si encuentras font-size: 18px;, lo cambiarás a font-size: 1.125rem;. Guarda el archivo y prueba el comportamiento del texto cambiando el tamaño de la fuente en el navegador.
Convirtiendo píxeles a rem en CSS: Ahora deberás convertir todas las unidades de font-size de píxeles a rem. Recuerda que 1 rem es igual a 16 píxeles. Si encuentras, por ejemplo, font-size: 24px;, lo convertirás a font-size: 1.5rem;. Haz esta conversión en todo el archivo CSS para mejorar la adaptabilidad del sitio.
Mejorando la responsividad de un sitio web: Una vez que hayas hecho las conversiones, prueba la responsividad del sitio cambiando el tamaño de fuente en las configuraciones del navegador. Cambia el tamaño de la fuente entre las opciones disponibles (muy grande, grande, mediano, pequeño y muy pequeño) y observa cómo se adapta el texto. Si encuentras algún problema de diseño o legibilidad, tómalo en cuenta para ajustar el estilo.
Ajustando el CSS para diferentes tamaños de fuente: Después de probar la responsividad, es posible que algunas secciones no se adapten bien a tamaños de fuente grandes o pequeños. Ajusta el CSS de estas secciones para mantener el diseño agradable y legible. Esto puede implicar modificar márgenes, rellenos o incluso el font-size en ciertas áreas. Si es necesario, usa @media queries para aplicar ajustes específicos según el tamaño de pantalla o la configuración de fuente.
Al completar estos ejercicios, mejorarás tus habilidades para crear sitios web más accesibles y adaptativos, garantizando una experiencia de usuario óptima en diversas configuraciones de pantalla y preferencias de tamaño de fuente.
