🖖 Inicio

SERVICIOS

Salir

nochedía

Unidades

600 palabras
2 minutos
May 4, 2020

Unidades

Último capítulo (antes del comentario final), con las unidades

Esto no es complicado pero que puede darnos problemas si no lo tenemos bajo control, o en otras palabras, tiene un impacto alto en nuestro website (no tanto el valor, que también, sino la decisión de qué unidades escojamos)

Hay dos maneras de expresar medidas en css, las absolutas y las relativas

Antes no había relativas, antes el mundo era más gris, pero hoy las relativas es a lo que tendemos todos

Por qué? Porque si ponemos una medida del 100%, eso será el 100% de 1980px (portátil) y el 100% de 400px (móvil), y se adaptará sin que nosotros tengamos más trabajo

Esto queda muy bonito, pero no es perfecto, por ejemplo con las fuentes

Si en lugar de poner font-size: 18px; ponemos font-size: 1.3em; no tendremos una fuente responsive que se adapte sin problemas, tendremos una fuente que cambia de tamaño en función del "entorno", sí

Pero eso no será suficiente, y al final necesitas adaptar el responsive para que con pantallas de 400px no sea 1.3em sino 1.1em, con lo que al final estamos un poco en lo mismo

*O al menos yo no he encontrado la manera de que utilizando estas unidades (que ahora veremos) tengamos este problema resuelto

Dicho esto, mi opinión es que preferiblemente utilices medidas relativas, con excepciones que normalmente son imágenes, por ejemplo no le veo mucho sentido especificar un min-width en unidades relativas si tu lo que quieres es que bajo ningún concepto ese icono tenga menos de 30px de ancho, porque sino deja de ser legible

El porqué de utilizar unidades relativas, si al final tenemos que ajustarlas casi de igual modo, tiene que ver con la accesibilidad, aunque el impacto es mucho menor del que te puedas imaginar (las fuentes en px también son accesibles)

Unidades em y rem

Muy útiles y te diré porqué, no es porque sean relativas a las dimensiones del a pantalla, esto ya he aclarado antes lo que pienso al respecto, el tema es que son relativas a sus padres y esto sí nos ayuda mucho

Ahora, en el codepen cambia en main el font-size: 2rem;

Como ves, el cambio afecta a todos los hijos porque em quiere decir relativo al font-size del elemento padre

En <main> podría haber puesto también em, pero si pongo rem lo que estoy diciendo es que su relación no es con el padre inmediato sino que es con el elemento padre-de-todos, que es <html>, con lo que es un valor que no depende de nadie más

Aquí no importa porque <main> ya está arriba del todo, pero utilizar rem es como hacer un reset en las medidas

Te doy un ejemplo

Y ahora cambia lo mismo que antes, verás que la fuente del input no cambia, está "protegido" por su 1rem

Unidades viewport

Por viewport se entiende el espacio que se ve de la pantalla, es decir, lo que el usuario ve

Lo tenemos en ancho vw y en largo vh y poner como ancho de un elemento width: 100vw; es perfectamente válido

Diferencia con los porcentajes? poca, los viewports incluyen el espacio que puedan ocupar las barras de scroll, el porcentage no, por eso es preferible utilizar el porcentaje para los width width: 100%;

Y lo mismo con el height? No, sorprendente verdad? Pero el porcentaje % depende del elemento padre, así que si este ocupa un 20% de la pantalla, por mucho que en el hijo pongamos height: 100%; éste seguirá ocupando el 20% del espacio

En cambio, si en el hijo le ponemos height: 100vh; entonces habremos triunfado y ocuparemos todo el largo de la página independientemente de lo que diga el padre

Esto tiene su gran utilidad en distribuciones donde necesitamos que nuestros elementos ocupen todo el largo de la pantalla, y eso lo veremos cuando exploremos layouts en un próximo curso

Y hasta aquí el penúltimo capítulo del curso de CSS básico, el último con contenido antes del comentario final donde hemos tratado las unidades que podemos utilizar en css

Y con esto nos vemos en el último capítulo en Comentario

Qué tal este capítulo?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]