¿Por qué utilizar em para establecer el tamaño de fuente en lugar de px en un diseño responsivo?

px píxeles (Píxel). Unidad de longitud relativa. Pixel px es relativo a la resolución de pantalla de diferentes dispositivos (pad/teléfono/pc). (Citado del manual de CSS2.0)

1em se refiere al tamaño de una fuente. Heredará el tamaño de fuente del elemento principal, por lo que no es un valor fijo. El tamaño de fuente predeterminado para cualquier navegador es 16px.

px es relativo a la resolución de la pantalla y em es relativo al div principal, por lo que es más apropiado usarlos en un diseño responsivo, porque el tamaño de fuente predeterminado de cualquier navegador es fijo y diferente dispositivo resoluciones de pantalla Pero todas son diferentes.

em tiene las siguientes características:

1. El valor de em no es fijo;

2 Em heredará el tamaño de fuente del elemento principal.

Entonces, cuando escribimos CSS, debemos prestar atención a dos puntos:

1. Declarar font-size=62.5 en el selector de cuerpo.

2. Divida su valor de px original por 10 y luego reemplácelo con em como unidad.

3 Vuelva a calcular el valor de em de las fuentes ampliadas. Evite declaraciones repetidas sobre tamaños de fuente.

lt; body style="font-size: 62.5"gt; 1em por defecto es 16px, aquí 1em se convierte en 10px

lt; "gt; El 1.2em aquí heredado del cuerpo es 12px

lt;p style="font-size: 1em;"gt;lt;/pgt; Heredado de un lado, por lo que el 1em aquí también es 12px

lt;/asidegt;

lt;/bodygt;

Eso es para evitar el fenómeno de 1,2 * 1,2 = 1,44. Por ejemplo, si declara el tamaño de fuente como 1,2 em en un lado, cuando declara el tamaño de fuente de p, solo puede ser 1 em, no 1,2 em, porque este em no es ese em y hereda la altura de fuente de a un lado y se convierte en 1em=12px.