Unidades de Medida en CSS: Absolutas y Relativas

Contenido del curso

Introducción al desarrollo frontend

Maquetación con HTML

Maquetación con CSS

Diseño responsivo

Arquitecturas en CSS

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:35

Unidades de Medida en CSS: Absolutas y Relativas

Curso de Frontend Developer

Clase 18 de 24

Clase 18 / 24

Recursos

Las unidades de medida establecen una longitud para un determinado elemento o tipografía. Existen dos tipos de medidas: absolutas y relativas.

Qué son las medidas absolutas

Las medidas absolutas son valores fijos, por lo que la medida no cambiará. La unidad absoluta más utilizada son los píxeles px, las demás son muy poco utilizadas, pero es bueno que las conozcas.

Unidad	Nombre	Equivalencia
px	píxeles	1 px = 1/96 in
cm	centímetros	1 cm = 96/2.54 px
mm	milímetros	1 mm = 1/10 cm
Q	cuartos de milímetros	1 Q = 1/4 mm
in	pulgadas	1 in = 2.54 cm = 96 px
pc	picas	1 pc = 1/6 in
pt	puntos	1 pt = 1/72 in

Qué son las medidas relativas

Las medidas relativas son valores variables, por lo que la medida depende de un valor externo. Se debe tener en cuidado con estas porque un pequeño cambio puede desencadenar tamaños muy elevados.

Unidad	Depende de
em	el elemento que lo contiene
rem	el elemento raíz
vw	1% del ancho de la pantalla (view width)
vh	1% de la altura de la pantalla (view height)
vmin	1% de la dimensión más pequeña de la pantalla
vman	1% de la dimensión más grande de la pantalla
ch	anchura del caracter ""0"" del elemento que lo contiene
lh	altura de la línea del elemento que lo contiene

Diferencia entre rem y em

La medida em depende del elemento que lo contiene, es decir, si un elemento tiene font-size de 20px, el valor de em es igual a 20px, el valor de 2em será de 40px y así sucesivamente.

La medida rem depende del elemento raíz, el valor del font-size del elemento raíz es de 16px, por lo tanto, el valor de 2rem es igual a 32px, y así sucesivamente.

Ejemplo de medida em

En las herramientas del desarrollador, te muestra el tamaño de la fuente (font) en píxeles.

Ejemplo de medida rem

Diferencia entre porcentajes y la anchura y altura de la pantalla

Los porcentajes representan el tamaño con respecto al total del elemento padre. Si el elemento padre tiene 20px, entonces el 100% será de 20px.

Por otra parte, las medidas de anchura vw y altura vh representan el tamaño con respecto al total de la pantalla. Si el elemento tiene un tamaño de 100vw será el 100 por ciento de la pantalla.

Si un elemento tiene todo el tamaño de la pantalla, entonces solamente en ese punto la medida 100% será igual a 100vw o 100vh.

Problema con las medidas de texto

Los navegadores tienen una opción para cambiar el tamaño del texto. Con medidas absolutas, el tamaño de la letra no cambiará, por lo que será un problema para el usuario.

Con medidas relativas, el tamaño cambiará con respecto a la fuente del elemento raíz. Por lo que estas son una buena opción para solucionar este problema de accesibilidad, en específico la medida rem.

Sin embargo, la medida rem equivale a 16px y puede ser confuso mientras utilices valores altos. Por lo que vamos a cambiar el valor del elemento de la raíz para que la medida rem sea igual a 10px.

En la etiqueta <html> cambia el valor de la propiedad font-size a 62.5%, resultado de una regla de tres: si 16px es igual al 100% entonces cuál será el porcentaje para 10px.

html {
    font-size: 62.5%;
}

Con este cambio, la medida rem será igual a 10px, ahora los puedes utilizar sin problema y tus textos cambiarán según las preferencias de usuario.

Contribución creada por Andrés Guano (Platzi Contributor).

Axel Enrique Galeed Gutierrez

Hace 5 años

Medidas Absolutas

Es la unidad de medida que no va a cambiar sin importar el tamaño de la pantalla.

Una unidad absoluta puede ser los píxeles.

p {
    font-size: 18px;
}

Medidas Relativas

Estás si pueden cambiar en relación con el dispositivo que lo estamos viendo.

Las unidades relativas pueden ser porcentajes, em (elemento), rem (root em o root elemento), max-width, max-height, min-width, min-height. Estas últimas varían basándonos en el tamaño de la pantalla.

main {
    background-color: red;
    width: 100%; /*Unidad relativa*/
    height: 500px;
}

EM es un acrónimo de elemento, va a tomar el tamaño de fuente que tenga el padre directo.

Por default un em es 16px que es de la etiqueta html.

Ejemplo

Yo al colocar 1.5em al tamaño de fuente de un elemento, este elemento pasa a tener un tamaño 50% más grande que la fuente que tiene el padre directo. Esto pasa cada vez que usamos la medida relativa em, los hijos toman como medidas de referencia las medidas que tiene su padre directo y esto puede causar confusiones.

EM no es de las mejores medidas.

REM

Esta medida relativa siempre va a tener referencia o correlación con el estilo que tenga la etiqueta root o el root de nuestro proyecto, que siempre es nuestra etiqueta html.

Por defecto el navegador le da a la etiqueta html un font-size de 16px.

Aun que coloquemos textos anidados veremos que no tendremos ningún cambio como pasaba antes con la medida em.

REM es menos confuso que EM.

Truco para usar rem

Debemos setear nuestra etiqueta html de la siguiente forma:

html {
    font-size: 62.5%; 
}

Con esto estamos estableciendo un tamaño de 10px al tamaño de fuente.

Lo que hace esta unidad relativa es que toma como referencia el tamaño del viewport o pantalla.

Lo que hace esta medida relativa es que toma como referencia el alto del viewport o pantalla.

Min-width y max-width

Una regla impórtate cuando los usamos es que necesitamos tener un width base que casi siempre es en porcentajes.

Lo que sude con estos dos que limitan el crecimiento del contenedor (max-width) o la reducción del contenedor (min-width). Una vez que llegue al límite que establecemos este contenedor deja de crecer o reducirse.

En este caso el selector crece como máximo hasta los 500 px y se reduce como máximo hasta los 320 px.

selector {
	width: 80%;
	min-width: 320px;
	max-width: 500px;
}

Min-height y max-height

En este caso no necesitamos un height base. Se utiliza para evitar problemas de overflow.

Con min-height estamos diciendo que la altura mínima del contenedor va a ser X, pero si tiene contenido que exceda esa altura mínima que se expanda hasta donde el contenido deje de crecer.

Con max-height limitamos cuanto puede crecer el contenedor a lo alto.

Buenas prácticas

Es buena práctica utilizar el rem y em.
No es buena práctica tener un scroll horizontal en dispositivos mobiles.

Estilos que siempre debe estar al comienzo de nuestro archivo.css

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%; 
}

Sergio Alejandro González Sánchez

Hace 5 años

Lo mejor es que valla en el body lo que es el reseteo de margin y el padding, y en la universal solor el box-sizing : PORQUE, si estamos utilizando css grid en un proyecto tambien se nos resetea el grid, y va a quedar en cero por eso es recomendado poner en el body el Margin y el Padding 👍🏼

Javier Suárez Meerhoff

Hace 5 años

gracias!

Comentarios (140)140 comentarios

Carlos Eduardo Gomez García

José Iván Ballín González

arturo

Jesús Lautaro Careglio Albornoz

Esaú Maximino

Ana Rotela Cabrera

Hace 4 años

Tomás André Peñaloza Avilés

Luz Marina Orjuela Rojas

Hector Taboada

Gustavo Gonzalez Montero

Julián Pedroza García

Diego Armando Rengel Calvopiña

Hace 3 años

Samuel Fernando Pérez Arpi

Juan Araujo

Luis angel osorio ochoa

Juan Gustavo Daza Martínez

Rafael Martínez Rodríguez

Joe Harry Mancera Monroy

Carlos Rodríguez

Andres López

Edilberto Antonio Suárez Ramos

Jhoana España Urresty

Beder Danilo Casa Condori

Fernando de Jesus Basurto Villegas

Enrique López

Carlos David Guedez Rangel

Yerson Felipe Ramirez Garnica

Adriel Francesco Pezo Vizcarra

Sebastián Arredondo Posada

Hernán Josué Hernández Lamprea

Guillermo Díaz

Jefferson David R.L

Scarlette Samanta Tinajero Paez

Yobana Iris Ney Silva Rivero

Alejandro de Jesús Escareño Flores

Fernando Avila Ruiz

Victoria Andrés

Estefany Aguilar

Profesor

Camilo Carrillo

María Del Pilar Chávez Gutiérrez

Estiven Mahecha Henao

Introducción al desarrollo frontend

Fundamentos de HTML y CSS para Desarrolladores Frontend

¿Qué es HTML?

Motores de Renderizado en Navegadores: Funcionamiento y Etapas

Maquetación con HTML

Anatomía y Estructura de Documentos HTML

HTML Semántico: Mejora la Accesibilidad y SEO de tu Web

Etiquetas HTML esenciales para estructurar una página web

Maquetación con CSS

Anatomía de una Declaración CSS: Selectores y Sintaxis Básica

Selectores CSS: básicos y combinadores

Selectores CSS: Pseudo Clases y Pseudo Elementos

Cascada y Especificidad en CSS: Domina el Orden y Prioridad de Estilos

Tipos de Display en CSS: Inline, Bloque e Inline-Block

Flexbox y CSS Grid: Fundamentos y Aplicaciones Prácticas

Modelo de Caja en CSS: Propiedades y Uso Práctico

Colapso de márgenes en CSS: Bloques, Flexbox y Grid

Tipos de posicionamiento en CSS: Relative, Absolute, Fixed y Sticky

Z-Index y Contexto de Apilamiento en HTML/CSS

Propiedades CSS más utilizadas en diseño web

Diseño responsivo

Unidades de Medida en CSS: Absolutas y Relativas

Creación de Tutoriales para Compartir Conocimientos

Media Queries y Diseño Responsivo en CSS

Arquitecturas en CSS

Arquitecturas CSS: Mejora de Legibilidad y Mantenibilidad del Código

Metodologías de CSS: OOCSS, VEM, SMACS y Atomic Design

Próximos pasos

CSS para Entrevistas y Mundo Laboral

HTML y CSS: Fundamentos Esenciales para Frontend Developer

Unidades de Medida en CSS: Absolutas y Relativas

Progreso del curso

Introducción al desarrollo frontend

Maquetación con HTML

Maquetación con CSS

Diseño responsivo

Arquitecturas en CSS

Próximos pasos

Recursos

Recursos