Responsivo

1. Basta desenvolver uma interface.
2. A adaptação da tela para a página está dentro de um determinado intervalo: por exemplo, um conjunto para PC (>1024), um conjunto para tablet (768-1024), um conjunto para celular (<768); estão adaptados. (Como você pode imaginar: o design responsivo precisa ser considerado muito mais complexo que o design adaptativo)
3. Crie uma página web e use CSS Media Query, Content-Based Breakpoint e outras tecnologias para alterar o tamanho da página web para se adaptar a telas com diferentes resoluções.

Adaptativo

1. Múltiplas interfaces precisam ser desenvolvidas
2. Ao detectar a resolução da viewport, é determinado se o dispositivo atualmente acessado é: PC, tablet ou celular, solicitando assim a camada de serviço e retornando diferentes páginas, o design responsivo detecta a resolução da viewport e realiza operações no cliente para diferentes clientes; Processamento de código para exibir diferentes layouts e conteúdos.
3. Crie diferentes páginas da web para diferentes tipos de dispositivos e chame as páginas da web correspondentes após detectar a resolução do dispositivo.

Diferencie entre responsivo e adaptativo

1. Use o navegador Chrome ou Edge para abrir a URL no computador.
2. de acordo com F12 Ou clique com o botão direito e selecione Detecção。
3. Clique no canto superior esquerdo do painelÍcone de troca de dispositivo,Como mostrado abaixo

4. Depois de mudar,
   O layout exibido no computador e nos terminais móveis muda automaticamente, ou sejaResponsivo, como este site;
   Se o layout não se adaptar automaticamente, o layout mudará para adaptação após atualizar a página (o URL salta ou não salta), ou sejaAdaptativo, como Baidu;
   Se não houver alternância após a atualização, ele não será responsivo nem adaptável e não se adaptará a diferentes dispositivos.

sugestão

• Perspectiva de desenvolvimento: página única, funções complexas, funções simples adaptativas, responsivas.
• Perspectiva de SEO: os mecanismos de pesquisa geralmente preferem capacidade de resposta.

Resumir

• Responsivo:um conjunto de modelos; Adaptados pelo front-end, os modelos com diferentes resoluções são mesclados em uma página e o download de uma página de modelos equivale a apenas uma página.
• Adaptativo:Vários conjuntos de modelos; Adaptado pelo backend, cada modelo de resolução possui uma página e diferentes modelos de resolução são baixados separadamente.