Ευαίσθητος

1. Απλώς αναπτύξτε μια διεπαφή.
2. Η προσαρμογή οθόνης για τη σελίδα είναι εντός ενός συγκεκριμένου εύρους: για παράδειγμα, ένα σετ για υπολογιστή (>1024), ένα σετ για tablet (768-1024), ένα σετ για κινητά τηλέφωνα (<768). προσαρμόζονται. (Όπως μπορείτε να φανταστείτε: ο σχεδιασμός με απόκριση πρέπει να θεωρείται πολύ πιο περίπλοκος από τον προσαρμοστικό σχεδιασμό)
3. Δημιουργήστε μια ιστοσελίδα και χρησιμοποιήστε CSS Media Query, Content-Based Breakpoint και άλλες τεχνολογίες για να αλλάξετε το μέγεθος της ιστοσελίδας ώστε να προσαρμόζεται σε οθόνες με διαφορετική ανάλυση.

Προσαρμοστικό

1. Πρέπει να αναπτυχθούν πολλαπλές διεπαφές
2. Ανιχνεύοντας την ανάλυση της θύρας προβολής, προσδιορίζεται εάν η συσκευή στην οποία έχετε πρόσβαση είναι: Η/Υ, tablet ή κινητό τηλέφωνο, ζητώντας έτσι το επίπεδο υπηρεσίας και επιστρέφοντας διαφορετικές σελίδες με απόκριση, ανιχνεύει την ανάλυση της θύρας προβολής και εκτελεί λειτουργίες στον πελάτη για διαφορετικούς πελάτες. Επεξεργασία κώδικα για εμφάνιση διαφορετικών διατάξεων και περιεχομένου.
3. Δημιουργήστε διαφορετικές ιστοσελίδες για διαφορετικούς τύπους συσκευών και καλέστε τις αντίστοιχες ιστοσελίδες αφού εντοπίσετε την ανάλυση της συσκευής.

Διακρίνετε μεταξύ ανταποκρινόμενου και προσαρμοστικού

1. Χρησιμοποιήστε το πρόγραμμα περιήγησης chrome ή edge για να ανοίξετε τη διεύθυνση URL στον υπολογιστή.
2. σύμφωνα με F12 Ή κάντε δεξί κλικ και επιλέξτε Ανίχνευση.
3. Κάντε κλικ στην επάνω αριστερή γωνία του πίνακαΕικονίδιο εναλλαγής συσκευής,Οπως φαίνεται παρακάτω

4. Μετά την αλλαγή,
   Η διάταξη που εμφανίζεται στον υπολογιστή και στα τερματικά του κινητού αλλάζει αυτόματα, δηλαδήΕυαίσθητος, όπως αυτός ο ιστότοπος.
   Εάν η διάταξη δεν προσαρμοστεί αυτόματα, η διάταξη θα αλλάξει σε προσαρμογή μετά την ανανέωση της σελίδας (η διεύθυνση URL μεταπηδά ή δεν μεταπηδά), δηλαδήΠροσαρμοστικό, όπως το Baidu;
   Εάν δεν υπάρχει εναλλαγή μετά την ανανέωση, δεν αποκρίνεται ούτε προσαρμόζεται και δεν προσαρμόζεται σε διαφορετικές συσκευές.

πρόταση

• Προοπτική ανάπτυξης: μεμονωμένη σελίδα, σύνθετες λειτουργίες, προσαρμοστικές απλές λειτουργίες, απόκριση.
• Προοπτική SEO: Οι μηχανές αναζήτησης προτιμούν γενικά την ανταπόκριση.

Συνοψίζω

• Ευαίσθητος:ένα σύνολο προτύπωνΠροσαρμοσμένα από το μπροστινό μέρος, τα πρότυπα με διαφορετικές αναλύσεις συγχωνεύονται σε μία σελίδα και η λήψη μιας σελίδας προτύπων είναι μόνο μία σελίδα.
• Προσαρμοστικό:Πολλαπλά σετ προτύπωνΠροσαρμοσμένο από το backend, κάθε πρότυπο ανάλυσης έχει μία σελίδα και διαφορετικά πρότυπα ανάλυσης λαμβάνονται χωριστά.