DINAMIZAK
/ blog / unidades en css
La diferencia entre usar Pixeles (PX) y REM, EM, VW, VH es que los pixeles son unidades absolutas, es decir nunca cambiarán aunque la pantalla cambie, las demás unidades si lo hacen ya que son relativas.
La unidad rem puede variar dependiendo de la cantidad de pixeles que le asignes, de forma predetrminada equivale a:
HTML = 16px
1rem = 16px
Aquí podemos ver un ejemplo gráfico:
CSS
html {
font-size: 16px;
}
.texto {
font-size: 2rem;
}
/**
16 * 2 = 32px
**/
font-size: 32px
Para cambiar esta expresión:
1rem = 16px y pasarla a 1rem = 32px
Debemos hacerlo de la siguiente manera:
CSS
html {
font-size: 32px;
}
.texto {
font-size: 2rem;
}
/**
32 * 2 = 64px
**/
font-size: 64px
Para poder hacer un texto responsivo con unidades REM y que se adapte dependiendo del tamaño de la pantalla, simplemente cambiamos la fuente raiz (HTML) en cada tamaño que elijamos para adaptar el texto:
CSS
// Ordenador
@media (max-width: 1400px) {
html {
font-size: 16px;
}
}
// Tablet
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
// Móvil
@media (max-width: 450px) {
html {
font-size: 12px;
}
}
EM es lo mismo que REM, con la diferencia de que multiplica los anteriores EM previos del CSS.
CSS
html {
font-size: 16px;
}
.texto {
font-size: 2em;
}
/**
16 * 2 = 32px
**/
font-size: 32px
En este caso vamos a añadir más elementos EM a un mismo CSS para que se multiplique su resultado:
CSS
html {
font-size: 16px;
}
.texto {
font-size: 3em;
padding: 3em;
}
/**
font-size => 3em * 16px = 48px
padding => 3em * 3em * 16px = 144px
**/
font-size: 32px
padding: 144px
La unidad VW es equivalente a usar porcentajes, VW se usa para el ancho de la pantalla:
1vw = 1%
Por tanto poner 50vw sería equivalente a ocupar el 50% del ancho un div.
CSS
.caja {
width: 50vw;
}
Las unidades VH son los mismo que las VW, pero usa para el alto de la pantalla y actua también como un porcentaje:
1vh = 1%
Por tanto poner 50vh sería equivalente a ocupar el 50% de la altura de un div.
CSS
.caja {
height: 50vh;
}
8min