La conexión y diferencia entre css px, em y rem del front-end

1, píxel px, unidad de longitud relativa. Pixel px está relacionado con la resolución de la pantalla. Se utiliza para el borde o posicionamiento de elementos.

2.em es una unidad relativa de longitud. El tamaño de fuente relativo al texto del objeto actual. Si el tamaño de fuente del texto en línea no está configurado actualmente, es relativo al tamaño de fuente predeterminado del navegador.

3.rem es una nueva unidad relativa (raíz) en CSS3. En comparación con los elementos raíz html, rem combina las ventajas del tamaño relativo y el tamaño absoluto. A través de él, todos los tamaños de fuente se pueden ajustar proporcionalmente simplemente modificando el elemento raíz, evitando la reacción en cadena de combinar tamaños de fuente capa por capa. Básicamente, todos los principales navegadores del mercado lo admiten actualmente. Para los navegadores que no lo admiten, la solución es muy simple: simplemente escriba más unidades absolutas.

Resumen:

1, px, em y rem son unidades de medida y pueden representar dimensiones. Px es un "tamaño absoluto", en realidad no es absoluto.

2. em y rem son tamaños relativos, pero sus objetos relativos son diferentes. El primero es relativo al tamaño de fuente del elemento principal y el segundo es relativo al tamaño de fuente del elemento raíz.

3. El tamaño de fuente de las unidades em y rem no es fijo, son valores de píxeles calculados a partir del tamaño de fuente. Por lo tanto, ambos se utilizan principalmente para diseños responsivos.

Nota:

Las unidades de fuente que elijas utilizar dependerán en gran medida de tu proyecto. Si su base de usuarios utiliza la última versión del navegador, se recomienda utilizar rem. Si le preocupa la compatibilidad, utilice px o ambos.