Skip to main content

Diferencias entre unidades: px, em y %

El tamaño importa. Y más cuando tienes que ajustar tu diseño a todo tipo de dispositivos. En web, estamos dando tamaños a todo lo que podemos ver: letras, divisiones, columnas… Es muy importante darle un tamaño adecuado a cada cosa para que no perdamos las propiedades de nuestro diseño. En este pequeño artículo os vamos a enseñar hoy la diferencia entre tres de las unidades para asignar tamaño más usadas (¡que no las únicas!).

¿Qué unidades hay?

Hay muchas unidades para asignar tamaño en web. Podríamos diferenciar entre las medidas absolutas (pulgadas, centímetros, puntos…), y relativas, que son las que vamos a tratar hoy. Estas últimas son más habituales debido a la adaptación flexible que tienen a los distintos dispositivos, y generalmente los más usados son los tres que traemos. Echemos un vistazo a la siguiente tabla:

UnidadSímboloEjemplo
Porcentaje%width:50%;
Relativo al tamaño de letraemfont-size:2em;
Pixelpxfont-size:15px;

Empecemos con el porcentaje. A la hora de asignar un tamaño usando esta unidad, tenemos que tener en cuenta que el tamaño se dará es relativo al elemento que lo contenga. ¿Qué quiere decir esto? Muy sencillo: si tengo una división que no tiene elemento superior, el 50% de mi división será el 50% de la página. Si por el contrario, mi división está dentro de una división de 100px de ancho, el 50% serán solo 50px del total.

Ya que lo hemos mencionado, sigamos con los píxeles. Esta unidad variará dependiendo de los puntos visibles que tenga la pantalla donde se visualice la web. Esto significa que se mostrará mayor o menor en función de nuestra pantalla. Siguiendo con el ejemplo anterior, no es lo mismo tener un espacio de 100px en móvil que en PC, ya que en cada sitio el tamaño es diferente.

Por último, la unidad relativa al tamaño de letra. En este caso, em es una medida que va en relación al tamaño de la M mayúscula de la fuente que se esté utilizando. Es decir, si estoy utilizando la fuente “Lato”, como en nuestro caso, y una M tiene un tamaño de 12px, la relación que tendremos será la siguiente: 1em = 12px2em = 24px, etc.

¿Qué unidad debo usar?

Ciertamente, no hay una unidad que sea mejor que las demás o que destaque por encima de las otras. Es cierto que, para maquetar nuestras webs lo mejor posible, el buen uso de estas unidades hará que la visualización de nuestro modelo responsive sea muy buena. Por lo general, se suele utilizar para tamaños de contenedores y divisiones, mientras que los pxem para tamaños de letra y márgenes. ¿Mi recomendación? Bichea, averigua qué es lo mejor para implementar tu diseño y utilízalo de la mejor manera posible.

Related Posts

Joomla vs WordPress

Es una de las grandes preguntas en el diseño web con un CMS, de hecho...

Margin y padding: aplicando nuestros diseños en web

Cuando queremos aplicar nuestros diseños a una página web, las propiedades que más guardan los...

Herramienta para desarrolladores – Uso

No hace mucho, veíamos en este artículo una manera de aplicar nuestros márgenes, y os introducíamos...

Leave a reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*