Diferencia entre PX, EM, % en CSS explicado
Esta publicación demuestra la diferencia entre PX, EM y %(porcentaje). Además, también conocerías sobre las longitudes de unidades de bienes raíces y absolutas y sus diferencias.
¿Cuál es la diferencia entre PX, EM y porcentaje (%) en CSS??
En CSS, las unidades de tamaño se clasifican en dos categorías, la medida absoluta y relativa.
Unidades absolutas
Las unidades absolutas tienen valores fijos, por lo que no cambien sus valores hasta que el usuario los cambie manualmente. El px la unidad cae en la categoría absoluta de unidades de tamaño en CSS. Aunque PX no es bueno para la capacidad de respuesta, todavía se practica donde los elementos requieren tamaños fijos en la pantalla. Además, el nuevo usuario tiende a usar el px Como la unidad de dimensionamiento, ya que es fácil de manejar y no depende de ninguna otra unidad o elemento de tamaño.
Unidades relativas
Los otros dos Em y porcentaje pertenecer a la categoría relativa de elementos a medida que ambos cambian su comportamiento para manejar la capacidad de respuesta.
Em: Esta unidad se refiere al tamaño de fuente del elemento principal/raíz. También se puede usar para el ajuste de ancho/altura, pero el valor de 1EM sería de 16 px.
porcentaje(%): La unidad porcentual muestra la relevancia con el elemento principal.
Por ejemplo, si un elemento principal define el ancho = "10px". Ahora, este valor se tomaría como referencia para asociar el ancho en porcentaje.
Nota: CSS ofrece varias otras unidades relativas que incluyen REM, VW (View Port's Width) y VWH (altura de Ver Port) también pertenecen a la categoría relativa.
Ejemplo: Uso de valores de PX, EM y porcentaje
Se practica el siguiente código HTML para alcanzar la diferencia entre PX, EM y valores porcentuales.
Html
ancho en %
tamaño de fuente en EM
En el código anterior, hay elementos de dos padres (etiquetas div) y cada padre tiene un hijo. El primer padre Div contiene un párrafo que ejercería el ancho en porcentaje y el segundo Div Parent considera el tamaño de fuente del elemento.
CSS
El CSS anterior sería el principal interesado en demostrar la diferencia entre PX, EM y porcentaje. El ancho de las etiquetas Div se establece en 250px, lo que significa que sería igual al 100%. Por ejemplo, en el código anterior el .por clase toma el 75% del ancho total (250px).
Del mismo modo, el tamaño de fuente de los segundos elementos DIV se establece en 12px, lo que significa que 1em sería igual a 12px. Si se cambia el valor de EM, cambiaría en relación con el 12px (a partir del elemento principal).
Producción
De la salida, se observa que el ancho del elemento infantil (párrafo) se ha ajustado al 75% de su elemento principal (DIV). Además, el tamaño de fuente se establece en 2EM, lo que significa que sería el doble en comparación con el tamaño de fuente de su elemento principal (12px = 1em).
Conclusión
El px pertenece a la categoría absoluta de unidades de longitud, mientras que el EM y el %(porcentaje) se refiere a la clase relativa de unidades de tamaño. El valor de px se soluciona a través del documento HTML pero el Em y %(porcentaje) depende de la unidad utilizada por el elemento principal. El EM manipula principalmente el tamaño de fuente de los elementos HTML y la unidad porcentual (%) se refiere principalmente a cambiar la altura/ancho de un elemento HTML (según el elemento principal). En este artículo, habría aprendido los conceptos básicos de varias unidades como PX, EM y porcentaje. Para una mejor comprensión, hemos demostrado un ejemplo que aclara mejor la diferencia entre todas estas unidades.