En este vídeo explicamos las unidades absolutas y relativas:
Las unidades de medida a las que nos vamos a referir son las que se aplican a la anchura y altura de los elementos de HTML. No todos los elementos de HTML poseen los mismos atributos en cuanto a sus dimensiones. Por ejemplo la etiqueta div tiene los atributos width y height; pero la etiqueta span no los tiene. En los ejemplos tendremos en cuenta los elementos más usados sobre los que se aplican la anchura y altura, como párrafos, divisiones, tamaño de letra, imágenes, etc. En la unidad 5 ya vimos cómo modificar las dimensiones de las imágenes.
Podemos dividir las unidades de medida en dos grupos: relativas y absolutas.
Las unidades relativas se definen en función de otro elemento, como el ancho de la pantalla o el ancho del tipo de letra. Por ejemplo, si escribimos un width: 40%, queremos decir que ese elemento tendrá el 40% del ancho de la pantalla en la que se visualice (o el ancho de su contenedor). En realidad en este contexto cuando decimos pantalla, nos referimos a la ventana de visualización. Las unidades relativas son muy utilizadas en los diseños adaptables, como veremos en la unidad 14.
Las unidades absolutas son fijas y no cambian, se definen en si mismas respecto a alguna unidad de medida. Por ejemplo si escribimos un width:200px, el elemento tendrá 200 pixels en cualquier pantalla. No hay que escribir un espacio en blanco entre el número y la unidad, width: 200 px sería erróneo; ni poner un punto al final, width: 200px. también estaría mal.
1. Unidades absolutas.
px, El píxel es la unidad más utilizada hasta la fecha. Por ejemplo, 200px. En algunos casos, como en los márgenes puede ser un número negativo. En ocasiones también se puede utilizar el valor cero sin unidades, por ejemplo margin:0, indica sin margen y no necesita unidades. 1 px=0.75 pt. También se define el pixel como 1px=1 pulgada/96, por lo tanto 2,54 cm/96=0,26 mm. es decir, 1 px=0,26 mm. Nota: una pulgada son 2,54 cm.
El píxel es la unidad más utilizada en las dimensiones de las imágenes ya que en edición gráfica también se utiliza el píxel. También es habitual utilizarlo en las dimensiones de contenedores como div, así como en márgenes, padding. Hasta ahora también se utilizaba el píxel para definir el tamaño de la fuente con font-size, pero se están utilizando cada vez más unidades relativas como em y rem.
Puntos, se escribe como pt, 1 pt = 1 pulgada/72 = 2,54/72=0,0352 cm. = 0,352 mm.
Centímetros, se escribe como cm. 1cm = 96 px/ 2.54
Milímetros, se escribe como mm. 1mm = 1/10 cm
Pulgadas, se escribe como in, 1 in = 2.54 cm = 96 px
Picas, se escribe pc, 1 pc = 1/6 in = 16 px.
Las unidades como cm, mm, in, tiene más sentido utilizarlas cuando se va a imprimir la página en papel que para verla en pantalla.
Las unidades absolutas, como el píxel no cambian, si modificamos el tamaño de la ventana, puedes comprobarlo con este ejemplo donde mostramos un contenedor div de width:300px, debajo hay de otro contenedor div definido con una unidad variable como width:40%:
<div style="width: 300px; background-color:azure">Ancho fijo. Definido con width: 300px </div>
<br>
<div style="width: 40%; background-color:azure">Ancho variable. Definido con width: 40% </div>
En realidad, estas unidades absolutas no lo son hablando estrictamente. Las unidades absolutas son relativas a la resolución de la pantalla (aunque parezca un contrasentido). De hecho el W3C clasificaba el píxel como unidad relativa hasta CSS 2.1 (2011). Los cálculos para mostrar los tamaños se basan en suponer una resolución de pantalla 96 ppp (pixels por pulgada) algo casi estándar en la época que se definió CSS2 en la que los ordenadores tenían pantallas similares. Sin embargo, en 2018, los ordenadores con esta resolución, aunque siguen siendo un alto porcentaje, ya no son la amplia mayoría desde donde se accede a internet. Ahora hay múltiples dispositivos, con una variada gama de resoluciones, por ejemplo, los teléfonos móviles y tablets tienen resoluciones entre 200-600 ppp., las televisiones smart tv entre 50-80 ppp., y cada vez hay nuevos dispositivos como pantallas en automóviles, frigoríficos, etc.
Para comprobar que el píxel es relativo a la resolución de la pantalla podemos medir el siguiente rectángulo de 189x76 px en diversos dispositivos.
<div style="width: 189px; height: 76px; background-color: darkgray">width: 189px; height: 76px;</div>
En una pantalla Samsung de 23,5" de 1366x768 px. de resolución mide 71x28 mm.
En la pantalla de un portátil HP Envy de 13,3" y 1366x768 px. mide 47x19 mm.
En una smart TV LG de 42" mide 183x73 mm.
En un iPhone 6s de 4,7" y 1.334 x750 px. y 326 ppp. con la pantalla en orientación vertical mide 29x12 mm.
En un iPad de 9,7" de 2048x1536 px. a 264 ppp. con la pantalla en orientación vertical mide 37x14 mm.
Podemos calcular teóricamente la equivalencia de 189x76 px. en pantallas con resolución de 96 ppp.; tenemos que 1px=1 pulgada/96 es decir 2,54 cm/96=0,26 mm., por lo tanto 189x0,26=49 mm. Y de la misma forma calculamos que 76 px=19,8 mm. Por lo tanto en pantallas de 96 ppp. tendremos un rectángulo de 49x19,8mm. Como vemos este valor teórico se aproxima bastante al valor real de 47x19 mm. obtenido en la pantalla HP Envy de 13,3".
Por lo tanto, si el dispositivo tiene una resolución en torno a 96 ppp, width:189px se verán como 49 mm. reales, si el dispositivo es de más resolución se verán más pequeños de 49 mm; y si es de menor resolución se verán más grandes de 49 mm.
Podemos dibujar un rectángulo de 50x20 mm:
<div style="width: 49mm; height: 20mm; background-color: darkgray">width: 49mm; height: 20mm;</div>
Para calcular resoluciones hay que tener en cuenta que las pulgadas deben ser lineales, en anchura, no en diagonal que es el valor que dan en las especificaciones de los fabricantes, por ejemplo un iPad de 9,7" de diagonal, mide 7,76" de ancho, como tiene 2048x1536 px. de resolución, para obtener los ppp. dividimos la resolución horizontal entre las pulgadas de su anchura 2048/7,76=264 ppp.
Otro concepto que confirma que las unidades absolutas (pixels) son relativas a la resolución de la pantalla es el device-pixel-ratio que apareció al aumentar la resolución de los dispositivos móviles. La pantalla de un teléfono móvil puede tener tres veces más píxeles físicos por pulgada en comparación con la pantalla de otro teléfono móvil, independientemente de su tamaño de pantalla física. Se define device-pixel-ratio es el cociente entre los pixels físicos y los dips (device-independent pixels).
En la práctica en los ordenadores portátiles vale 1, en los dispositivos móviles varía entre 1 y 3, según la resolución (por ejemplo, 2 para iPhone 6, Nexus4; 3 para iPhone X, Nexus 5).
Por ejemplo, para un iPhone X el fabricante da 1125x 2436 pixeles de resolución pero como su device-pixel-ratio=3 sus dimensiones en píxeles a la hora de dibujar un rectángulo desde CSS son 375x812 pixeles, siempre que utilicemos la anchura del dispositivo en el viewport (<meta name="viewport" content="width=device-width, initial-scale=1.0">).
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.