px

Píxeles

fr

Permite dividir rápidamente una cuadrícula en columnas o filas proporcionales (fracciones).

em

Relativo al tamaño de fuente de un elemento. Si, por ejemplo, utilizamos 3em (font-size: 3em); mi texto aumentará 3 veces su tamaño en relación al tamaño que se esté utilizando por defecto.

vw

Porcentaje relativo a la anchura del viewport.

vh

Porcentaje relativo a la altura del viewport.

%

Porcentaje, puede ser relativo frente a varios elementos, si trabajamos con fuentes es relativo a la fuente, pero si lo aplicamos a width es relativo a la anchura del contenedor, por poner dos ejemplos.

auto

Establece automaticamente el tamaño que considera adecuado.

Opinión

En el caso de usar los píxeles como unidad depende de lo que pretenda hacer cada uno en su página web, de esta forma se fija la medida independientemente del dispositivo (no es muy recomendable). Usar como unidades "fr" o "auto" nos ayuda a dividir más facil la página en partes proporcionales, haciendo así que su aspecto mejore.

Comportamiento responsivo

Al utilizar media queries hacemos que la página detecte si la ventana en la que se está viendo tiene más o menos de 600px. De esta forma conseguimos darle diseños distintos dependiendo del dispositivo en el que se esté viendo la página (diseño responsivo)