Responsif

1. Hanya membangunkan antara muka.
2. Penyesuaian skrin untuk halaman berada dalam julat tertentu: contohnya, satu set untuk PC (>1024), satu set untuk tablet (768-1024), satu set untuk telefon mudah alih (<768); disesuaikan. (Seperti yang anda boleh bayangkan: reka bentuk responsif perlu dianggap lebih kompleks daripada reka bentuk penyesuaian)
3. Buat halaman web dan gunakan CSS Media Query, Content-Based Breakpoint dan teknologi lain untuk menukar saiz halaman web untuk menyesuaikan diri dengan skrin dengan resolusi yang berbeza.

Adaptif

1. Pelbagai antara muka perlu dibangunkan
2. Dengan mengesan resolusi port pandangan, ia ditentukan sama ada peranti yang diakses pada masa ini ialah: PC, tablet, atau telefon mudah alih, dengan itu meminta lapisan perkhidmatan dan mengembalikan halaman yang berbeza reka bentuk responsif mengesan resolusi port pandangan dan menjalankan operasi pada klien untuk pelanggan yang berbeza. Pemprosesan kod untuk memaparkan reka letak dan kandungan yang berbeza.
3. Buat halaman web yang berbeza untuk jenis peranti yang berbeza dan panggil halaman web yang sepadan selepas mengesan resolusi peranti.

Bezakan antara responsif dan adaptif

1. Gunakan krom atau edge pelayar untuk membuka URL pada komputer.
2. mengikut F12 Atau klik kanan dan pilih Pengesanan.
3. Klik di sudut kiri atas panelIkon penukaran peranti,Seperti yang ditunjukkan di bawah

4. Selepas bertukar,
   Susun atur yang dipaparkan pada komputer dan terminal mudah alih bertukar secara automatik, iaituResponsif, seperti laman web ini;
   Jika reka letak tidak menyesuaikan diri secara automatik, reka letak akan bertukar kepada penyesuaian selepas menyegarkan halaman (URL melompat atau tidak melompat), iaituAdaptif, seperti Baidu;
   Jika tiada pensuisan selepas menyegarkan, ia tidak responsif atau adaptif, dan ia tidak menyesuaikan diri dengan peranti yang berbeza.

cadangan

• Perspektif pembangunan: halaman tunggal, fungsi kompleks, fungsi mudah suai, responsif.
• Perspektif SEO: Enjin carian biasanya lebih suka responsif.

rumuskan

• Responsif:satu set templat; Disesuaikan oleh bahagian hadapan, templat dengan peleraian berbeza digabungkan menjadi satu halaman, dan memuat turun satu halaman templat hanyalah satu halaman.
• Adaptif:Berbilang set templat; Disesuaikan dengan bahagian belakang, setiap templat resolusi mempunyai satu halaman dan templat resolusi yang berbeza dimuat turun secara berasingan.