La unidad juega un papel importante para medir y construir cosas como una casa, un puente o una torre, y la construcción de un sitio web no es una excepción. Hay una serie de métodos de medición utilizados en la Web, específicamente en CSS, a saber Píxel, EM y Porcentaje.
En esta publicación, analizaremos estas unidades para obtener más información sobre estas unidades de medida.
Guía de unidades de ventana gráfica CSS: vw, vh, vmin, vmax
La unidad juega un papel importante para medir y construir cosas como una casa, un puente o una torre, y la construcción de un sitio web no es una excepción. Hay un Leer más
PX
El píxel es una unidad de medida fija y la unidad más pequeña en la medida de la pantalla, pero no lo confunda con el píxel que define la resolución de la pantalla. El Pixel en CSS no tiene nada que ver con la resolución de la pantalla.
Cuando tratamos de ver una página web fija en 1024px ancho digamos en una tableta con 1024px por 480px resolución de pantalla, la página web no cabrá en la pantalla.
He estado experimentando este problema en el pasado y descubrí que el píxel en CSS en realidad no es una unidad lineal; de hecho, es una medida radial.
Básicamente, el píxel en CSS mide la longitud del área de visualización en lugar de la resolución de la pantalla, por lo que el La resolución de pantalla de 1024px no significa que la pantalla también sea de 1024px de la longitud
Más sobre PX
No soy un experto en los tecnicismos de este tema, pero si conoces la trigonometría y quieres obtener más información, consulta la siguiente explicación de Sean B. Plamer: CSS px es una medida angular.
Encontrar el área de visualización
Entonces, ¿cómo encontramos el área de visualización real de un dispositivo? Por suerte, hay una calculadora especial útil para estimar aproximadamente el área de visualización en formato de Pixel, CM a PX.
Simplemente necesitamos la longitud del dispositivo en cm y el PPI (Punto por pulgada) / DPI (Punto por pulgada) que puede obtener en la caja del dispositivo. Con esto, resulta que la tableta que usé es simplemente 953pxen longitud.
Lectura recomendada: Crisis de identidad de píxeles
Tamaño de fuente de píxeles en Photoshop
Al trabajar en Photoshop, encontraremos que el tamaño de fuente está configurado de forma predeterminada en Punto (Puntos). La unidad Pt es ideal para estilos de impresión.
Para no confundir esto con px cuando lo estemos traduciendo a documentos Web, podemos cambiar las unidades desde el siguiente menú: Editar > Preferencias > Unidades y Reglas.
Allí, obtiene una opción de ventana como se muestra en esta captura de pantalla a continuación. Elija ‘píxeles’ para la unidad Tipo.
Y tenemos px para el tamaño de fuente.
EM
EM es una medida relativa. En CSS, EM se refiere a la multiplicación del tamaño de fuente predeterminado del dispositivo o del propio documento, es por eso que personalmente denomino EM como Enfatizarpero por supuesto no confíes en mi palabra.
Aquí hay un ejemplo; digamos en un documento, el tamaño de fuente asignado es 16px. 1em es igual a 16px, 2em es igual a 32px etcétera.
Aunque EM se usa tradicionalmente para el tamaño de fuente y, de hecho, es la unidad estándar utilizada en los estilos de navegador para medir el tamaño de fuente, también podemos usar EM para definir la longitud de un elemento.
La única restricción cuando se trabaja con la unidad EM es que no es muy intuitiva, pero hay dos formas prácticas de manejar esto. Primero, podemos usar esta calculadora, PX a EM; es una calculadora útil que uso a menudo.
Otra forma es establecer la base de píxeles del documento en 10px, para que podamos calcularlo más fácilmente; por ejemplo, configuración 15px en 1.5em. Bueno, espero que entiendas la idea básica con este ejemplo.
Porcentaje
Es más directo con el porcentaje, que mide relativamente a la longitud principal. Cuando el ancho principal es 800px entonces 50% se convertiría 400px. En los últimos años, a medida que el diseño receptivo comienza a convertirse en el estándar de diseño web, la unidad de porcentaje se adapta con mayor frecuencia en la naturaleza.
Muy bien, echemos un vistazo al siguiente ejemplo; este código a continuación define .container y .main selector de clase con 60% para el ancho, pero estas clases se refieren a diferentes padres, por lo que generan diferentes longitudes.
El .container tomará 60% del ancho de la ventana del navegador, mientras que el .main tomará .container ancho como su padre directo.
.container {
width: 60%;
margin: 100px auto;
background-color: #eaeaea;
padding: 1%;
height: 250px;
font-family: Arial;
text-align: center;
}
.main, .aside {
line-height: 253px;
}
.main {
width: 60%;
height: 100%;
float: left;
background-color: #ccc;
}
.aside {
width: 40%;
height: 100%;
background-color: #aaa;
float: left;
}
Por lo tanto, nos dará el siguiente buen resultado:
Como el porcentaje también es una unidad relativa, también tiene una restricción similar a la unidad EM. No es obvio cuánto un porcentaje 15px es de 500px? Esto generalmente sucede cuando traducimos px unidad desde la etapa de diseño hasta el documento web en muchos casos.
Hay dos formas en que podemos abordar este asunto, ya sea que lo hagamos tradicionalmente con una calculadora o si se siente cómodo usando el preprocesador CSS, puede utilizar el percentage() función de Sass.
Pensamientos finales
Hay muchas discusiones sobre las mejores prácticas de uso de unidades en el diseño web. Pero idealmente, la unidad PX debe usarse cuando las propiedades generalmente necesitan ser precisas, por ejemplo, la border-radius y box-shadow desplazamiento horizontal o vertical, mientras que para la unidad EM, según lo sugerido por W3C, se usa mejor para el tamaño de fuente. El porcentaje es la unidad ideal para usar en diseños receptivos.