En el desarrollo web moderno existen dos enfoques: diseños adaptativos y diseños responsivos.

Los diseños responsivos están concebidos para ofrecer múltiples variaciones de visualización que pueden transicionar suavemente entre sí, permitiendo la adaptación flexible y el redimensionamiento de los elementos. Cuando se modifica el tamaño del viewport, los bloques en la página se contraen o expanden de manera fluida, y en un punto de quiebre específico, cambian su posicionamiento para optimizar el uso del espacio horizontal.

Los diseños adaptativos presentan múltiples variaciones de visualización, pero los cambios de diseño se producen mediante saltos definidos entre puntos de quiebre. Una vez alcanzado un punto de quiebre, el diseño no puede modificarse hasta llegar al siguiente.

Práctica

Vamos a practicar creando 2 elementos div. El primer elemento tendrá un diseño adaptable y el segundo tendrá un diseño responsivo. Además, debemos agregar diferentes valores para la propiedad background-color según el cambio de pantalla.

• Para un ancho de 0 a 320px, el color es #7f58af;
• Para un ancho de 321px a 600px, el color es #64c5eb;
• Para un ancho de 601px a 880px, el color es #eb4dba;
• Para un ancho desde 881px, el color es #feb326.

El HTML se ve así:

<div class="adaptive"></div>
<div class="responsive"></div>

Para el diseño adaptable, también es necesario especificar un ancho concreto para el elemento div.

• Para un ancho de 321px a 600px, el ancho es 300px;
• Para un ancho de 601px a 880px, el ancho es 580px;
• Para un ancho desde 881px, el ancho es 860px.

El CSS se ve así:

div {
  height: 200px;
  margin: 10px auto;
  background-color: #7f58af;
}

/* ===> Adaptive <=== */

@media screen and (min-width: 321px) {
  .adaptive {
    background-color: #64c5eb;
    width: 300px;
  }
}
@media screen and (min-width: 601px) {
  .adaptive {
    background-color: #eb4dba;
    width: 580px;
  }
}
@media screen and (min-width: 881px) {
  .adaptive {
    background-color: #feb326;
    width: 860px;
  }
}

/* ===> Responsive <=== */

.responsive {
  width: 100%;
}

@media screen and (min-width: 321px) {
  .responsive {
    background-color: #64c5eb;
  }
}
@media screen and (min-width: 601px) {
  .responsive {
    background-color: #eb4dba;
  }
}
@media screen and (min-width: 881px) {
  .responsive {
    background-color: #feb326;
  }
}

El resultado obtenido. Por favor, observe el cambio de ancho de pantalla en la parte superior de la grabación: