Unidades de medida
px, %, em, rem, vw y vh: cuándo usar cada una.
px es una unidad fija en píxeles, predecible pero poco flexible ante cambios de zoom o preferencias del usuario. % es relativa al elemento padre, útil para anchos fluidos.
em es relativa al tamaño de fuente del elemento actual (se puede 'acumular' si hay anidamiento), mientras que rem es relativa siempre al tamaño de fuente del elemento raíz (html), lo que la hace más predecible para tamaños de texto consistentes.
vw y vh son relativas al viewport (1vw = 1% del ancho de la ventana), muy útiles para elementos que deben ocupar una fracción exacta de la pantalla, como una sección de portada a pantalla completa.
Ejemplo — pruébalo tú mismo
Ponlo a prueba: Convierte un tamaño en px a su equivalente en rem, asumiendo que la raíz mide 16px.