Unidades de Medida en CSS

<!-- Contenedor principal del contenido -->
<main class="layout">
  <!-- Tarjeta de contenido independiente del tamaño visual -->
  <section class="card">
    <!-- Título semántico del bloque -->
    <h1>Diseño Responsive</h1>
    <!-- Párrafo de texto informativo -->
    <p>Las unidades CSS definen cómo escala este contenido.</p>
  </section>
</main>

/* Tamaño fijo: no se adapta al usuario */
.card {
  width: 300px;
}

/* Tamaño relativo: escala según configuración */
.card h1 {
  font-size: 1.5rem;
}

<!-- Documento con jerarquía tipográfica correcta -->
<article class="content">
  <!-- Título principal del artículo -->
  <h1>Accesibilidad Web</h1>
  <!-- Subtítulo jerárquico -->
  <h2>Unidades relativas</h2>
  <!-- Texto principal -->
  <p>El uso de REM respeta las preferencias del usuario.</p>
</article>

/* Tamaño base del documento */
html {
  font-size: 16px;
}

/* Espaciado y texto escalables */
.content {
  padding: 2rem; /* 32px */
  font-size: 1rem; /* 16px */
}

<!-- Componente padre -->
<div class="card">
  <!-- Texto principal del componente -->
  <p class="text">Texto escalable</p>
</div>

/* Tamaño base del componente */
.card {
  font-size: 20px;
}

/* Escala basada en el padre */
.card .text {
  font-size: 1.5em; /* 30px */
  padding: 0.5em;  /* 15px */
}

<!-- Sección principal de bienvenida -->
<section class="hero">
  <!-- Mensaje central -->
  <h1>Bienvenido</h1>
</section>

/* Hero a pantalla completa */
.hero {
  height: 100vh;
}

/* Elemento adaptable a orientación */
.box {
  width: 50vmin;
  height: 50vmin;
}