Reattivo

1. Basta sviluppare un'interfaccia.
2. L'adattamento dello schermo per la pagina rientra in un determinato intervallo: ad esempio, un set per PC (>1024), un set per tablet (768-1024), un set per telefono cellulare (<768) sono adattati. (Come puoi immaginare: il responsive design deve essere considerato molto più complesso del design adattivo)
3. Crea una pagina Web e utilizza CSS Media Query, Content-Based Breakpoint e altre tecnologie per modificare le dimensioni della pagina Web per adattarla a schermi con risoluzioni diverse.

Adattivo

1. È necessario sviluppare più interfacce
2. Rilevando la risoluzione del viewport, viene determinato se il dispositivo attualmente a cui si accede è: PC, tablet o telefono cellulare, richiedendo così il livello di servizio e restituendo pagine diverse. Il design reattivo rileva la risoluzione del viewport ed esegue operazioni sul client per diversi client. Elaborazione del codice per visualizzare layout e contenuti diversi.
3. Crea pagine web diverse per diversi tipi di dispositivi e richiama le pagine web corrispondenti dopo aver rilevato la risoluzione del dispositivo.

Distinguere tra reattivo e adattivo

1. Utilizza il browser Chrome o Edge per aprire l'URL sul computer.
2. secondo F12 Oppure fai clic con il pulsante destro del mouse e seleziona Rilevamento。
3. Fare clic su nell'angolo in alto a sinistra del pannelloIcona di cambio dispositivo,Come mostrato di seguito

4. Dopo il passaggio,
   Il layout visualizzato sul computer e sui terminali mobili cambia automaticamenteReattivo, come questo sito;
   Se il layout non si adatta automaticamente, il layout passerà all'adattamento dopo l'aggiornamento della pagina (l'URL salta o non salta), cioèAdattivo, come Baidu;
   Se non avviene alcun passaggio dopo l'aggiornamento, non è né reattivo né adattivo e non si adatta ai diversi dispositivi.

suggerimento

• Prospettiva di sviluppo: pagina singola, funzioni complesse, adattivo; funzioni semplici, responsivo.
• Prospettiva SEO: i motori di ricerca generalmente preferiscono la reattività.

Riassumere

• Reattivo:una serie di modelli; Adattati dal front-end, i modelli con risoluzioni diverse vengono uniti in un'unica pagina e il download di una pagina di modelli è solo una pagina.
• Adattivo:Set multipli di modelli; Adattato dal backend, ogni modello di risoluzione ha una pagina e diversi modelli di risoluzione vengono scaricati separatamente.