Fogékony

1. Csak dolgozzon ki egy interfészt.
2. Az oldal képernyőadaptációja egy bizonyos tartományon belül van: például egy készlet PC-hez (>1024), egy készlet táblagéphez (768-1024), egy készlet mobiltelefonhoz (<768) az összes oldalhoz alkalmazkodnak. (Ahogy el tudod képzelni: a reszponzív tervezést sokkal összetettebbnek kell tekinteni, mint az adaptív tervezést)
3. Hozzon létre egy weboldalt, és használja a CSS Media Queryt, a Content-Based Breakpointot és más technológiákat a weboldal méretének módosításához, hogy alkalmazkodjon a különböző felbontású képernyőkhöz.

Adaptív

1. Több interfészt kell fejleszteni
2. A nézetablak felbontásának észlelésével megállapítható, hogy az aktuálisan elért eszköz: PC, táblagép vagy mobiltelefon, ezáltal lekéri a szolgáltatási réteget és különböző oldalakat ad vissza, a reszponzív tervezés érzékeli a nézetablak felbontását, és műveleteket hajt végre a kliensen a különböző klienseknél. Kódfeldolgozás a különböző elrendezések és tartalmak megjelenítéséhez.
3. Hozzon létre különböző weboldalakat a különböző típusú eszközökhöz, és hívja meg a megfelelő weboldalakat az eszköz felbontásának észlelése után.

Tegyen különbséget reszponzív és adaptív között

1. Használja a Chrome böngészőt vagy az Edget az URL megnyitásához a számítógépen.
2. alapján F12 Vagy kattintson a jobb gombbal és válassza ki Érzékelés.
3. Kattintson a panel bal felső sarkábanEszközváltás ikon,Az alábbiak szerint

4. Váltás után,
   A számítógépen és a mobilterminálokon megjelenő elrendezés automatikusan átvált, azazFogékony, például ezen az oldalon;
   Ha az elrendezés nem alkalmazkodik automatikusan, az oldal frissítése után az elrendezés adaptációra vált (az URL ugrik vagy nem ugrik), azazAdaptív, mint például a Baidu;
   Ha nincs váltás a frissítés után, akkor se nem reagál, se nem adaptív, és nem alkalmazkodik a különböző eszközökhöz.

javaslat

• Fejlesztési perspektíva: egyoldalas, összetett funkciók, adaptív, reszponzív;
• SEO perspektíva: A keresőmotorok általában a reszponzivitást részesítik előnyben.

Összesít

• Fogékony:sablonkészletA kezelőfelülethez igazítva a különböző felbontású sablonok egy oldalra egyesülnek, és egy oldal sablon letöltése csak egy oldal.
• Adaptív:Több sablonkészletA háttérprogram által adaptált minden felbontássablonnak egy oldala van, és a különböző felbontású sablonok külön töltődnek le.