¿Cuáles son las diferencias entre px, em y% en CSS? ¿Cuál debo usar y por qué?

En realidad hay uno más, es rem .

¿Cuál deberías usar y por qué?

Siempre recomiendo rem. Se usa ampliamente para desarrollar sitios web receptivos . Recientemente conocí sus beneficios y ahora lo prefiero en el código CSS que escribo para mi sitio web. Para usar rem, primero decido el tamaño de fuente base en html or body tag

Por ej.

html {
tamaño de fuente: 10px; // Así que aquí decidí que 1rem sería equivalente a 10px
}
// Ahora supongamos que quiero hacer un div con ancho y alto 200px
div.someClassName {
ancho: 20rem; // Como 1rem = 10px, 20rem = 20 × 10 = 200px
altura: 20rem;
}

¿Cuál es la diferencia b / w px, em, rem y%

PX:

En general, px representa un pequeño punto cuadrado en la pantalla. La mayoría de los dispositivos tienen diferentes resoluciones, tales como:

• 1920 × 1080 para FHD (completamente HD)
• 1360 × 760 para HD
• o incluso otras variantes.

EM:

em denota la altura de la ‘letra M’ en la fuente base del padre .

Por ej.

hola aquí

MOVIMIENTO RÁPIDO DEL OJO:

em denota la altura de la ‘letra M’ en la fuente base de la etiqueta HTML o BODY .

Esto te ayuda a estandarizar muchas cosas. Solo una autoridad tiene control sobre el tamaño. Ya discutí su ejemplo al principio.

%:

El% de edad generalmente lo calcula el navegador que representa la página web. También juega un papel importante en el diseño web receptivo. El% de edad generalmente captura las dimensiones de los padres.

Por ej.

Buena pregunta,

px significa píxeles y no se usa tanto desde que surgió el diseño web receptivo. Si tiene un contenedor, por ejemplo, #container {height: 100px; ancho 100px; background-color: pink} obtendría un cuadro simple en la pantalla de 100 píxeles por 100 píxeles. No importa si está en un teléfono celular, tableta o PC.

em y% son unidades de medida relativas.

em es relativo al principal al tamaño del padre. Se usa con mayor frecuencia para tamaños de fuente, pero no tiene que ser así. Si, por ejemplo, tiene una fuente en particular, su tamaño predeterminado es de 100 píxeles; uno de ellos sería el tamaño predeterminado de la fuente. 2em sería dos veces, .5em sería la mitad de ese tamaño.

Ahora para %. Es relativo a algo. tomemos el tamaño de la pantalla. si toma su etiqueta de cuerpo y establece el fondo en 100% cuerpo {fondo: 100%}, el fondo se escalará al 100% de la pantalla, independientemente de si es un televisor de pantalla grande, computadora portátil, tableta o teléfono celular

Los píxeles serán relativos a la pantalla que muestra la página. Si el ancho de su pantalla es de 1000 píxeles y crea un cuadro de 500 píxeles de ancho, ocupará la mitad del ancho de su pantalla.

El porcentaje es relativo a lo que sea que contenga el elemento. Una caja que tiene un ancho del 50%, será la mitad del ancho que cualquier contenedor que lo contenga.

Em se basa en el tamaño de la fuente, que se designa por separado. Una fuente puede tener un tamaño de 24 px, por lo que .5em equivaldría a 12 px.

Hay otras unidades que quizás quieras conocer, como vw y vh.

Consulte la página de Unidades CSS de w3schools para obtener una referencia completa.

Probablemente puedas googlear todo esto, pero una explicación rápida a lo mejor de mi recuerdo:

Píxeles: un solo píxel en una pantalla / monitor, etc.

em: relativo al tamaño de fuente predeterminado en un navegador

%: relativo al elemento dom del contenedor