Mis apuntes de desarrollo web </>

Medidas absolutas

Las medidas absolutas NO CAMBIAN y siempre mantendrán su tamaño independientemente del dispositivo o la interacción del usuario. La más usada es px (píxeles) cuya medida es 1/96 de 1in, pero existen otras como:

• cm (centímetros): 1cm = 96px/2,54.
• mm (milímetros): 1mm = 1/10 de 1cm.
• Q (cuarto de de milímetro): 1Q = 1/40 de 1cm.
• in (inches, pulgadas): 1in = 2,54cm = 96px.
• pc (picas): 1pc = 1/16 de 1in.
• pt (puntos): 1pt = 1/72 de 1in.

Medidas relativas

Las medidas relativas SIEMPRE dependen de un contexto. Son las que se recomienda utilizar en la gran mayoría de ocasiones porque permiten que todos los elementos escalen proporcionalmente. Las más usadas son em, rem, %, vw, vh, vmin y vmax aunque tenemos otras como:

• ex: Altura x de la fuente del elemento.
• ch: La medida del ancho del glifo "0" de la letra del elemento.
• lh: Altura de la línea del elemento.

Medidas EM y REM

rem: Corresponde a la medida de la "m" de la raiz del documento (html).

ejemplo: 16px = 1rem

em: Corresponde a la medida de la "m" del contexto donde nos encontremos.

El estandar del tamaño de fuente por defecto en la raiz del documento es 16px, y NO ES RECOMENDABLE MODIFICARLO.

Tanto "em" como "rem" se calcula en base a la propiedad font-size (tamaño de fuente)

Utilizar solo en tamaños de fuente.

Uso de % vs auto en width y height:

Width:

• %: Cuando se usa porcentaje se usa de referencia el tamaño del contenedor y el navegador calcula ese porcentaje. Esto no ocurre cuando se usa transform.
• auto: Cuando se usa auto se le pide al navegador que calcule el ancho en función del espacio disponible.

Height

• %: Cuando se está dentro de un contenedor, este tiene que tener un alto declarado, si no no podrá calcular el porcentaje. Si se le aplica una medida con porcentaje se sustituirá automaticamente por auto.
• auto: Cuando se utiliza auto el alto lo calculará el navegador en base al contenido del elemento.

Height es una propiedad que se debe usar con mucho cuidado. Si no es necesario establecer un alto, es mejor dejar que el contenido sea el que decida el alto del elemento.

Con alto en % si se tiene un position absolute y fixed el % se calculará tomando en cuenta el viewport, no tomará en cuenta ni el elemento contenedor, ni el body, ni html, solo el viewport.

Viewport

El viewport es el área útil donde se mostrará la página web. Es el area visible sin hacer scroll. Se puede usar el viewport como medida de varias formas:

• vw: Viewport Width, hace referencia al ancho del viewport.
• vh: Viewport Height, hace referencia al alto del viewport.
• vmax: Utiliza el valor más grande entre el ancho y el alto del viewport.
• vmin: Utiliza el valor más pequeño entre el ancho y el alto del viewport.

• 1vw = 1% del ancho del viewport.
• 1vh = 1% del alto del viewport.
• 1vmin = 1% del valor que sea más pequeño del viewport (ancho o alto).
• 1vmax = 1% del valor que sea más grande del viewport (ancho o alto).

Las medidas del viewport son utiles en fuentes y en diseño responsive.

Limitadores al ancho y alto

Cuando se establece un width y/o un height con una medida que es relativa, es posible que no se desee que se respete esa medida en todos los casos. Para ello existen propiedades que limitan esas medidas:

• min-width: Indica el ancho minimo que puede alcanzar el elemento.
• max-width: Indica el ancho máximo que puede alcanzar el elemento.
• min-height: Indica el alto minimo que puede alcanzar el elemento.
• max-height: Indica el alto máximo que puede alcanzar el elemento.