UF1303 | Elaboración de hojas de estilo

Las medidas

Tipos de medidas

Medidas absolutas

• D010-medidas-absolutas.html

Se presentan las medidas absolutas básicas:

Píxeles (px)
1px = 1/96 de 1in

Centrímetros (cm)
1cm = 96px/2,54

Milímetros (mm)
1mm = 1/10 de 1cm

Cuarto de milímetro (Q)
1Q = 1/40 de 1cm

Pulgadas o inches (in)
1in = 96px = 2.54cm

Puntos (pt)
1pt = 1/72 de 1in

Picas (pc)
1pc = 12 pt
1pc = 1/16 de 1in

Medidas relativas

• D020-medidas-relativas.html

Se presentan las medidas relativas básicas:

em | Relativa al tamaño de la fuente del elemento padre. La unidad em es escalable y siempre depende de su elemento padre. En este ejemplo, el elemento contenedor tiene un tamaño de fuente de 10px y un elemento hijo tiene una fuente con tamaño 2em, este texto se mostrará con un tamaño de 20px.
Ejemplo:

<div class="contenedor">
    Contenedor padre
    <p>Párrafo hijo</p>
</div>

.contenedor{
    font-size: 10px;
}
.contenedor p {
    font-size: 2em; /* equivale a 20px */
}

rem | Relativa al tamaño de la fuente del elemento raíz o root (html). En este ejemplo, el elemento hijo tiene una fuente con tamaño 1.5rem. Como el tamaño de la fuente del elemento html es de 16px, este texto se mostrará con un tamaño de 24px.
Ejemplo:

<article>
    <p>Párrafo </p>
</article>

article p {
    font-size: 1.5rem; /* equivale a 24px */
}

ex | Relativa al tamaño de la altura de la letra 'x' del elemento padre. La unidad ex es escalable y siempre depende de su elemento padre. En este ejemplo, el elemento contenedor tiene un tamaño de fuente de 20px y un elemento hijo tiene una fuente con tamaño 1ex, este texto se mostrará con un tamaño de equivalente a la altura de la letra 'x' del elemento padre.
Ejemplo:

<div class="contenedor">
    Contenedor padre
    <p>Párrafo hijo</p>
</div>

.contenedor{
    font-size: 10px;
}
.contenedor p {
    font-size: 1ex;
 /* equivale a la altura del glifo 'x' de
    .contenedor */
}

ch | Relativa al tamaño del ancho (avance) del glifo '0' del elemento padre. La unidad ch es escalable y siempre depende de su elemento padre. En este ejemplo hay un elemento padre y un hijo que tiene una fuente con tamaño de fuente 1ch, este texto se mostrará con un tamaño de equivalente a la anchura del glifo '0' del padre.
Ejemplo:

<div class="contenedor">
    Contenedor padre
    <p>Párrafo hijo</p>
</div>

.contenedor{
    font-size: 20px;
}
.contenedor p {
    font-size: 1ch;
 /* equivale a la anchura del glifo '0' de
    .contenedor */
}

lh | Relativa al tamaño de la altura de línea del propio elemento. La unidad lh es escalable y depende del propio elemento. El elemento tiene un tamaño de línea de 100px. La altura y anchura del elemento es de 1lh y debería adoptar esos mismos 100px. El problema es que lh es una unidad de medida no soportada por la mayoría de navegadores.
Ejemplo:

<div class="caja">
    Hola mundo
</div>

.caja{
    line-height: 100px;
    width: 1lh;
    height: 1lh; 
}

vw | % del ancho de la ventana gráfica. La unidad vw depende de la anchura de la ventana gráfica. En el ejemplo, el elemento tiene una anchura equivapente a la mitad de la ventana gráfica.
Ejemplo:

<div class="caja">
    Hola mundo
</div>

.caja{
    width: 50vw;
}

vh | % de la altura de la ventana gráfica. La unidad vh depende de la altura de la ventana gráfica. En el ejemplo, el elemento tiene una anchura equivapente al 10% de la ventana gráfica.
Ejemplo:

<div class="caja">
    Hola mundo
</div>

.caja{
    width: 10vh;
}

vmin | % de la dimensión más pequeña de la ventana gráfica. La unidad vmin depende del tamaño de la ventana gráfica. En el ejemplo, el elemento tiene una anchura equivapente al 50% de la dimensión más pequeña de la ventana gráfica.
Ejemplo:

<div class="caja">
    Hola mundo
</div>

.caja{
    width: 50vmin; /* equivale a la mitad
    de la dimensión menor de la ventana */
}

vmax | % de la dimensión más grande de la ventana gráfica. La unidad vmax depende del tamaño de la ventana gráfica. En el ejemplo, el elemento tiene una anchura equivapente al 50% de la dimensión más grande de la ventana gráfica.
Ejemplo:

<div class="caja">
    Hola mundo
</div>

.caja{
    width: 50vmax; /* equivale a la mitad de
    la dimensión mayor de la ventana */
}

% | Unidad porcentual relativa al elemento padre. La unidad % es escalable y siempre depende de su elemento padre. En este ejemplo, el elemento contenedor tiene una anchura de 300px y un elemento hijo tiene una anchura del 50%, esto equivale a 150px.
Ejemplo:

<div class="contenedor">
    Contenedor padre
    <p>Párrafo hijo</p>
</div>

.contenedor{
    width: 300px;
}
.contenedor p {
    width: 50%;
 /* equivale a la mitad del ancho del
    elemento .contenedor */
}

Rem y em

• D030-rem-em.html

Se presenta el uso adecuado de las unidades de medida rem y em:

Unidades rem y em
Ejemplo:

.boton-1 {
    font-size: 16px;
/*  Las siguientes medidas no son
    proporcionales al tamaño de la
    fuente del botón */
    padding: 8px 16px;
    margin: 8px 16px;
}
.boton-2 {
    font-size: 1rem;
/*  Las siguientes medidas no son
    proporcionales al tamaño de la
    fuente del botón */
    padding: 8px 16px;
    margin: 8px 16px;
}
.boton-3 {
    font-size: 1rem;
/*  Las siguientes medidas son
    proporcionales al tamaño de
    la fuente del botón */
    padding: 0.5em 1em; 
    margin: 0.5em 1em;
}