Receptiv

1. Doar dezvoltați o interfață.
2. Adaptarea ecranului pentru pagină este într-un anumit interval: de exemplu, un set pentru PC (>1024), un set pentru tabletă (768-1024), un set pentru telefon mobil (<768); sunt adaptate. (După cum vă puteți imagina: designul receptiv trebuie considerat mult mai complex decât designul adaptiv)
3. Creați o pagină web și utilizați CSS Media Query, Content-Based Breakpoint și alte tehnologii pentru a modifica dimensiunea paginii web pentru a se adapta la ecrane cu rezoluții diferite.

Adaptiv

1. Trebuie dezvoltate mai multe interfețe
2. Prin detectarea rezoluției viewportului, se determină dacă dispozitivul accesat în prezent este: PC, tabletă sau telefon mobil, solicitând astfel nivelul de serviciu și returnând diferite pagini, detectează rezoluția viewportului și efectuează operațiuni pe client pentru diferiți clienți; Procesarea codului pentru a afișa diferite aspecte și conținut.
3. Creați pagini web diferite pentru diferite tipuri de dispozitive și apelați paginile web corespunzătoare după detectarea rezoluției dispozitivului.

Faceți diferența între receptiv și adaptiv

1. Utilizați browserul Chrome sau Edge pentru a deschide adresa URL pe computer.
2. conform F12 Sau faceți clic dreapta și selectați Detectare。
3. Faceți clic în colțul din stânga sus al panouluiPictograma de comutare a dispozitivului,Așa cum se arată mai jos

4. După comutare,
   Aspectul afișat pe computer și terminalele mobile comută automat, adicăReceptiv, cum ar fi acest site;
   Dacă aspectul nu se adaptează automat, aspectul va trece la adaptare după reîmprospătarea paginii (URL-ul sare sau nu sare), adicăAdaptiv, cum ar fi Baidu;
   Dacă nu există nicio comutare după reîmprospătare, nu este nici receptiv, nici adaptiv și nu se adaptează la diferite dispozitive.

sugestie

• Perspectivă de dezvoltare: o singură pagină, funcții complexe, funcții simple adaptive, responsive;
• Perspectiva SEO: Motoarele de căutare preferă, în general, capacitatea de răspuns.

Rezuma

• Reactiv:un set de șabloane; Adaptate de front-end, șabloanele cu rezoluții diferite sunt îmbinate într-o singură pagină, iar descărcarea unei pagini de șabloane este doar o singură pagină.
• Adaptiv:Seturi multiple de șabloane; Adaptat de backend, fiecare șablon de rezoluție are o pagină și diferite șabloane de rezoluție sunt descărcate separat.