ey Teknik untuk Mencipta Reka Letak Responsif Supaya Anda Tidak Perlu Bergantung Pada Rangka Kerja CSS yang Berat

Anda tidak memerlukan rangka kerja CSS yang berat untuk membina reka letak responsif.

Rangka kerja CSS seperti Tailwind dan Bootstrap benar-benar berkuasa, tetapi kadangkala, ia terlalu banyak untuk tapak web yang lebih kecil. Anda boleh mencapai semua ciri yang ditawarkan oleh mereka dalam kod CSS tulen. Di bawah tudung, mereka semua menggunakan teknik asas yang sama untuk tapak web responsif.

Malah, jika anda benar-benar ingin mengetahui cara rangka kerja dan tapak web responsif tersebut berfungsi, maka anda perlu memahami 5 teknik asas.

Berikut ialah 5 teknik untuk menjadikan tapak web anda responsif:

Teknik #1: Konfigurasikan Viewport

Tahukah anda satu teg meta boleh mengawal cara tapak web anda berskala pada mana-mana saiz skrin?

Ya, teg meta itu ialah Viewport.

Jika anda tidak tahu apa itu Viewport, maka Viewport ialah kawasan yang boleh dilihat pada halaman web pada peranti, sama ada telefon, tablet atau desktop. Anda mungkin bertanya apa yang dilakukannya. Ia menentukan cara kandungan diskalakan dan dipaparkan berdasarkan saiz skrin peranti.

Memandangkan skrin datang dalam pelbagai saiz, Viewport memainkan peranan penting dalam menjadikan tapak web responsif.

Sekarang, bagaimana cara menggunakannya?

Cuma gunakan teg meta Viewport dalam fail HTML anda.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Teknik #2: Gunakan Pendekatan Diutamakan Mudah Alih

Jika anda tidak mereka bentuk mudah alih yang diutamakan, anda silap melakukannya.

Oleh kerana lebih separuh daripada trafik web hari ini datang daripada peranti mudah alih. Dan itulah pendekatan yang diterima pakai oleh Tailwind. Dan mereka meminta anda melakukan perkara yang sama. Di sini, kita bercakap tentang menggunakan CSS tulen dan bukannya rangka kerja, tetapi pendekatannya masih sama.

Pendekatan mudah alih-Diutamakan membantu dalam jangka panjang, kerana anda perlu menulis berbilang versi kod yang sama untuk jenis peranti yang berbeza.

Teknik #3: Gunakan Grid CSS dan Flexbox

Adakah anda masih menggunakan reka letak berasaskan Terapung untuk tapak web anda?

Saya harap anda tidak begitu. Dan jika anda masih menggunakannya, maka sudah tiba masanya untuk beralih kepada Flexbox dan CSS Grid kerana ia adalah alat yang berkuasa untuk mencipta reka letak yang fleksibel.

Apabila anda perlu membuat reka letak satu dimensi, gunakan Flexbox

Dan Apabila anda perlu mencipta reka letak dua dimensi, kemudian pergi ke Grid

Teknik #4: Buat Susun Atur Bendalir

Adakah anda menggunakan nilai piksel tetap di mana-mana di tapak web anda?

Kebanyakan pembangun memilih untuk menggunakan nilai piksel(px) sambil membangunkan reka letak yang berbeza pada skrin. Nilai piksel bagus untuk reka letak tetap tetapi tidak begitu bagus untuk reka letak responsif. Jika anda menggunakan reka letak bendalir seperti nilai berasaskan peratusan, maka reka letak anda akan mengubah saiz dengan lancar pada mana-mana saiz port pandangan.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Teknik #5: Gunakan Pertanyaan Media dengan Bijak

Pertanyaan Media ialah satu lagi teknik yang berguna untuk membuat reka letak responsif

Tetapi ia perlu digunakan dengan bijak. Ia menggunakan titik putus yang berbeza untuk susun atur yang berbeza. Kebanyakan pembangun melakukan kesilapan dengannya. Mereka mula mencipta untuk semua saiz skrin yang mungkin, yang membawa kepada kod yang tidak boleh diurus.

Dalam cadangan saya, pertanyaan media harus dibuat pada peralihan utama antara kategori peranti. Untuk cth. Mudah Alih ke Tablet, Tablet ke Desktop.

~

Baiklah, seperti yang anda lihat, terdapat pelbagai teknik yang tersedia untuk menjadikan tapak web anda responsif. Di atas kertas, nampaknya 5 teknik berbeza sedia untuk digunakan, tetapi secara praktikal, apabila anda mula bekerja di mana-mana tapak web pengeluaran, anda akan mula melihat kes penggunaan semua teknik tersebut.

Sekarang pergi dan bina tapak responsif, dan beritahu saya perkara yang anda gunakan sebaik mungkin.

Jika anda suka membaca ini, ikuti saya di Twitter/X untuk membaca lebih lanjut.

Atas ialah kandungan terperinci ey Teknik untuk Mencipta Reka Letak Responsif Supaya Anda Tidak Perlu Bergantung Pada Rangka Kerja CSS yang Berat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!