Reaktionsschnell

1. Entwickeln Sie einfach eine Schnittstelle.
2. Die Bildschirmanpassung für die Seite liegt in einem bestimmten Bereich: zum Beispiel ein Satz für PC (>1024), ein Satz für Tablet (768-1024), ein Satz für Mobiltelefone (<768); ein Satz für responsive Alle Seiten angepasst sind. (Wie Sie sich vorstellen können: Responsive Design muss als viel komplexer betrachtet werden als adaptives Design)
3. Erstellen Sie eine Webseite und verwenden Sie CSS Media Query, Content-Based Breakpoint und andere Technologien, um die Größe der Webseite zu ändern und sie an Bildschirme mit unterschiedlichen Auflösungen anzupassen.

Adaptiv

1. Es müssen mehrere Schnittstellen entwickelt werden
2. Durch die Erkennung der Viewport-Auflösung wird ermittelt, ob es sich bei dem aktuell aufgerufenen Gerät um einen PC, ein Tablet oder ein Mobiltelefon handelt. Dadurch wird die Serviceschicht angefordert und verschiedene Seiten zurückgegeben. Das responsive Design erkennt die Viewport-Auflösung und führt Vorgänge auf dem Client für verschiedene Clients aus. Codeverarbeitung zur Anzeige verschiedener Layouts und Inhalte.
3. Erstellen Sie verschiedene Webseiten für verschiedene Gerätetypen und rufen Sie die entsprechenden Webseiten auf, nachdem Sie die Geräteauflösung ermittelt haben.

Unterscheiden Sie zwischen responsiv und adaptiv

1. Verwenden Sie den Browser Chrome oder Edge, um die URL auf dem Computer zu öffnen.
2. entsprechend F12 Oder klicken Sie mit der rechten Maustaste und wählen Sie aus Erkennung。
3. Klicken Sie in die obere linke Ecke des PanelsSymbol für den Gerätewechsel,Wie nachfolgend dargestellt

4. Nach dem Wechsel,
   Das auf dem Computer und mobilen Endgeräten angezeigte Layout wechselt automatischReaktionsschnell, wie diese Seite;
   Wenn sich das Layout nicht automatisch anpasst, wechselt das Layout nach dem Aktualisieren der Seite (die URL springt oder nicht) zur AnpassungAdaptiv, wie Baidu;
   Erfolgt nach der Aktualisierung kein Wechsel, ist es weder reaktionsfähig noch adaptiv und passt sich nicht an verschiedene Geräte an.

Anregung

• Entwicklungsperspektive: Einzelseite, komplexe Funktionen, adaptiv; einfache Funktionen, responsiv.
• SEO-Perspektive: Suchmaschinen bevorzugen im Allgemeinen Reaktionsfähigkeit.

Zusammenfassen

• Responsiv:eine Reihe von Vorlagen; Vom Frontend angepasst, werden Vorlagen mit unterschiedlichen Auflösungen auf einer Seite zusammengeführt, und das Herunterladen einer Vorlagenseite ist nur eine Seite.
• Adaptiv:Mehrere Vorlagensätze; Vom Backend angepasst, hat jede Auflösungsvorlage eine Seite und verschiedene Auflösungsvorlagen werden separat heruntergeladen.