No desenvolvimento web moderno, existem duas abordagens: layouts adaptativos e responsivos.

Layouts responsivos são projetados para ter múltiplas variações de exibição que podem transitar suavemente entre si, permitindo o redimensionamento e alongamento flexível dos elementos. Quando o tamanho da viewport é alterado, os blocos na página são contraídos ou esticados de forma fluida e, em um breakpoint específico, eles mudam seu posicionamento para otimizar o uso do espaço horizontal.

Layouts adaptativos possuem múltiplas variações de exibição, mas as mudanças de design ocorrem por saltos definidos entre breakpoints. Uma vez que um breakpoint é atingido, o design não pode ser alterado até que o próximo breakpoint seja alcançado.

Prática

Vamos praticar criando 2 elementos div. O primeiro elemento terá o layout adaptativo e o segundo terá o layout responsivo. Também é necessário adicionar valores diferentes para a propriedade background-color conforme a alteração da tela.

• Para a largura de 0 a 320px, a cor é #7f58af;
• Para a largura de 321px a 600px, a cor é #64c5eb;
• Para a largura de 601px a 880px, a cor é #eb4dba;
• Para a largura a partir de 881px, a cor é #feb326.

O HTML fica assim:

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

Para o layout adaptativo, também é necessário especificar uma largura específica para o elemento div.

• Para a largura de 321px a 600px, a largura é 300px;
• Para a largura de 601px a 880px, a largura é 580px;
• Para a largura a partir de 881px, a largura é 860px.

O CSS fica assim:

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;
  }
}

O resultado obtido. Atenção à alteração da largura da tela na parte superior da gravação: