Lección 6: Medidas

Básicas: rem, em, px

.texto {

    /* Medida relativa: Tamaño de la letra del navegador. Por defecto suele ser 16px */
    font-size: 1rem; /* 1 * 16 = 16px */
    font-size: 0.5rem; /* 0,5 * 16 = 8px */
    font-size: 2rem; /* 2 * 16 = 32px */
    font-size: 3.2rem; /* 3.2 * 16 = 51.2px o 51px ya que no existen los decimales en las pantallas */

    /* Medida relativa: Tamaño de letra del elemento padre. No recomendada. */
    
    /* El elemento padre es "font-size: 10px" */
    font-size: 1rem; /* 1 * 10 = 10px */
    font-size: 0.5rem; /* 0,5 * 10 = 5px */
    font-size: 2rem; /* 2 * 10 = 20px */
    font-size: 3.2rem; /* 3.2 * 10 = 32px */

    /* Medida absoluta: 1px = 1/96 de 1 pulgada o 0,26 milímetros */
    font-size: 12px; 
}

6-1

width

Solo funciona con elementos de bloque.

.elemento {
    width: 20rem; 
}

Porcentajes: %, vw, vh

.elemento {
    /* Espacio disponible en el elemento */
    width: 100%; 
    
    /* Anchura del navegador */
    width: 100vw;
    
    /* Altura del navegador */
    height: 100vh;
}

6-2

min-width

Bloquea el elemento a una anchura mínima.

.elemento {
    min-width: 5rem;
}

max-width

Bloquea el elemento a una anchura máxima.

.elemento {
    max-width: 5rem;
}

6-3

height

Altura de un elemento de tipo bloque.

.elemento {
    height: 12rem;
}

min-height

Bloquea el elemento a una altura mínima.

.elemento {
    min-height: 12rem;
}

max-height

Bloquea el elemento a una altura máxima.

.elemento {
    max-height: 12rem;
}

6-4 6-5

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario