Una funcionalidad muy útil y que puede mejorar la experiencia de usuario dentro de una página web, es que el tamaño del texto de una página cambie de tamaño según el tamaño de la venta. Para ello, existen distintas formas, pero Sergio, profesor de nuestro Bootcamp Full Stack Web Developer, te enseña cómo conseguir tipografías fluidas en CSS de una forma rápida y sencilla con una extensión de Visual Studio Code. ¡Échale un vistazo al siguiente vídeo y descubre cómo!
Aceptar el consentimiento para ver esto
Como puedes ver en el video, Sergio instala la extensión Clamp it! de VS Code y dejando la configuración que viene por defecto (aunque si lo deseas puedes modificarlo).
Una vez se ha instalado la extensión, se puede utilizar con VS Code. Solo hay que introducir una medida mínima y máxima en píxeles, tal y como se muestra en el ejemplo del h1:
h1 {
font-size: 25, 45;
}
Después, tendrás que ir a la paleta de comandos y seleccionar la funcionalidad «Clamp it!». De forma automática, se introducirá el clamp, cambiando el máximo y mínimo en píxeles por rem, mientras que para la medida ideal realiza un cálculo con rem y viewport width. Quedaría como en el código siguiente:
h1 {
font-size: clamp(1.563rem, calc(0.313rem + 3.333vw), 2.813rem);
}
Esto se puede replicar para cualquier texto de la web, como por ejemplo el p. Utilizando un código similar al siguiente:
p {
font-size: 14, 20;
}
Y consiguiendo el siguiente código para la tipografía fluida en CSS:
p {
font-size: clamp(0.875rem, calc(0.5rem + 1vw), 1.25rem);
}
Utilizando esta extensión, podrás conseguir una tipografía fluida en CSS de una forma rápida y eficiente. Así, verás que la tipografía del texto cambia en función del tamaño de la ventana del navegador o del dispositivo que se utilice para navegar en tu web.
Si quieres aprender más sobre CSS y otras tecnologías, como HTML, JavaScript o MySQL, para convertirte en desarrollador profesional, no dudes en apuntarte a nuestro bootcamp.
