Semasa merancang laman web anda, penting untuk memastikannya kelihatan hebat di mana-mana peranti, tanpa mengira saiz dan bentuk skrin. Laman web responsif direka bentuk untuk kelihatan baik pada semua jenis peranti moden seperti komputer, telefon, tablet, TV, alat pakai, dan juga skrin kereta. Untuk menjadikan laman web responsif, anda perlu mengubah kod CSS dan HTML anda untuk mengubah ukuran elemennya secara automatik bergantung pada keadaan tertentu. WikiHow ini mengajar anda bagaimana merancang dan melaksanakan reka bentuk web responsif asas.
Langkah-langkah
Kaedah 1 dari 3: Merancang Reka Bentuk Responsif
Langkah 1. Ketahui bagaimana khalayak anda menggunakan laman web anda
Hari ini, majoriti orang yang melayari web melakukannya dari telefon bimbit dan tablet. Agar laman web responsif, anda mesti memastikan bahawa laman web itu dipaparkan dengan betul di mana sahaja ia dilihat. Sekiranya masa dan wang adalah intinya, fokus pada jenis peranti yang paling popular dengan pengguna anda (jika maklumat ini tersedia) dan cara mereka menggunakan laman web anda. Dengan menggunakan perisian analisis anda atau bentuk penyelidikan lain, cari tahu:
- Apa jenis peranti yang paling sering mereka gunakan untuk melihat laman web, memberi perhatian khusus kepada jenama telefon bimbit / tablet / komputer dan ukuran skrin / resolusi.
- Penyemak imbas apa yang paling popular dengan pengguna anda. Sejauh statistik global, Google Chrome adalah penyemak imbas web yang paling popular di seluruh dunia, tetapi Safari adalah yang kedua.
- Cara pelawat menggunakan laman web anda, seperti berapa banyak masa yang mereka habiskan untuk melihatnya, di mana mereka melihatnya, dan kandungan mana yang paling popular. Ini dapat membantu anda menentukan jenis kandungan yang penting untuk disertakan dan yang boleh dihilangkan.
Langkah 2. Reka susun atur yang berbeza untuk peranti yang berbeza
Anda dapat menggunakan kombinasi CSS dan JavaScript untuk mengesan perangkat pengguna, serta kemampuannya (sama ada ia menyokong Java, Flash, dll.), Dan menampilkan versi tertentu dari laman web anda dengan sewajarnya. Pertanyaan Media CSS sangat berguna untuk menentukan ukuran / resolusi peranti.
Langkah 3. Perhatikan pelbagai jenis interaksi
Pelawat anda boleh berinteraksi dengan laman web anda dengan menggunakan tetikus, papan kekunci, skrin sentuh, atau bahkan pembaca skrin untuk orang yang cacat penglihatan. Dengan mempertimbangkan hal ini, laman web anda harus memberi respons kepada klik tetikus, kekunci papan kekunci (Tab, Enter, Return, dll.) Dan sentuhan jari skrin.
Kesan penunjuk tidak berfungsi dengan apa-apa kecuali tetikus. Daripada menggunakan kesan ini, anda boleh meminta pengunjung mengklik butang atau ikon untuk memaparkan apa sahaja yang sebelumnya dipaparkan pada tetikus tetikus
Langkah 4. Pertimbangkan untuk menggunakan Sistem Pengurusan Kandungan (CMS)
Cara mudah untuk memastikan reka bentuk laman web anda responsif adalah dengan menggunakan CMS dengan tema responsif yang telah dibina. Menggunakan CMS seperti Joomla, Drupal, atau Wordpress membolehkan anda memastikan laman web anda kelihatan hebat di semua peranti tanpa perlu membuat kod sendiri elemen responsif. Periksa dengan penyedia hosting laman web anda untuk melihat alat CMS mana yang tersedia dengan perkhidmatan anda.
Langkah 5. Gunakan alat dalam talian untuk menguji laman web anda
Sekarang bahawa reka bentuk web responsif telah meningkat popularitinya, terdapat pelbagai alat percuma yang boleh anda gunakan untuk menguji laman web anda. Sekiranya anda telah mengekodkan laman web anda, gunakan alat ini untuk menguji penampilannya dalam pelbagai keadaan sehingga anda akan mengetahui di mana anda perlu meningkatkan respons:
- Ujian Mesra Mudah Alih oleh Google: Beri tahu anda sama ada laman web anda berfungsi juga pada peranti mudah alih seperti yang dilakukan di skrin komputer.
- resizeMyBrowser: Membolehkan anda melihat laman web anda dalam resolusi yang berbeza.
- Responsiator: Memaparkan laman web anda pada skrin peranti yang berlainan dalam susun atur yang berbeza (sisi atau sebelah kanan).
Kaedah 2 dari 3: Membuat Tata Letak Halaman Responsif
Langkah 1. Pertimbangkan kerangka helaian gaya responsif percuma
Kerangka kerja adalah sekumpulan HTML, CSS, dan / atau JavaScript yang telah ditulis sebelumnya yang dapat anda gunakan sebagai kerangka untuk laman web anda. Kerangka kerja semuanya diuji dan dioptimumkan untuk berfungsi dengan semua penyemak imbas, jadi yang perlu anda lakukan ialah memasukkan kandungan anda, menambah pilihan media dan warna anda, dan menerbitkan laman web anda. Beberapa kerangka kerja yang popular adalah:
- Tali kasut
- Kerangka
- Yayasan
Langkah 2. Tetapkan viewport dengan tag meta
Sekiranya anda tidak menggunakan kerangka kerja, anda pasti ingin memulakan dengan aspek yang paling penting dalam pengekodan laman web yang responsif: Viewport. Pandangan adalah bahagian laman web yang dapat dilihat oleh pengguna. Kunci untuk membuat paparan laman web anda dengan betul tanpa mengira ukuran layar adalah dengan mengukur ukuran ruang pandang pada tag META. Untuk melakukannya, sertakan teg ini di bahagian atas setiap halaman di laman web:
Langkah 3. Nyatakan ukuran teks berkaitan dengan ruang pandang
Setelah ruang pandang anda ditetapkan, teks di halaman anda akan berskala agar sesuai dengan layar. Walau bagaimanapun, fon mungkin kelihatan terlalu besar atau terlalu kecil jika ukurannya tidak ditentukan berkaitan dengan ruang pandang. Anda boleh melakukan ini dengan menentukan ukuran fon sebagai peratusan khusus viewport dengan unit vw. Contoh ini memberitahu header H1 untuk menampilkan pada 10% lebar viewport, tidak kira ukurannya:
wikiHow
Langkah 4. Gunakan pertanyaan media untuk menunjukkan gaya yang berbeza untuk ukuran skrin yang berbeza
Pertanyaan media membolehkan anda memilih sama ada untuk menampilkan elemen CSS tertentu bergantung pada ukuran skrin. Anda boleh menentukan spesifik pertanyaan media anda dalam fail CSS anda. Dalam contoh ini, warna latar badan akan menjadi merah jika ukuran skrin pengguna 480 piksel atau lebih besar:
wikiHow
Skrin @media dan (lebar minimum: 480px) {badan {latar belakang-warna: aqua; }}
Kaedah 3 dari 3: Menjadikan Gambar Responsif
Langkah 1. Gunakan sifat lebar CSS untuk menskalakan gambar
Daripada menetapkan lebar gambar ke jumlah piksel tertentu (mis., 500 piksel), gunakan peratusan (mis., 100%) sehingga gambar melihat lebar induknya dan sesuaikan dengan sewajarnya. Menetapkan lebar gambar hingga 100% memaksa gambar untuk naik dan turun bergantung pada ukuran layar penonton. Untuk melakukan ini selaras:
Langkah 2. Gunakan sifat lebar maksimum untuk menghadkan skala ukuran sebenar gambar
Sekiranya anda menggunakan sifat lebar pada langkah sebelumnya untuk memperkecil gambar hingga 100%, gambar akan tumbuh atau menyusut agar sesuai dengan 100% bekasnya tidak kira ukurannya. Ini bermaksud bahawa jika gambar berada di sisi yang lebih kecil, gambar akan berskala lebih besar daripada ukuran aslinya dan kualiti yang lebih rendah. Untuk mencegah hal ini terjadi, gunakan lebar maksimum untuk menetapkan ukuran penskalaan maksimum gambar menjadi 100% (ukuran sebenarnya). Ini caranya:
Langkah 3. Gunakan elemen gambar HTML untuk memaparkan gambar yang berbeza pada ukuran skrin yang berbeza
Sekiranya anda ingin membuat gambar bersaiz khusus untuk dipaparkan pada layar yang berlainan ukuran, anda dapat menentukan foto mana yang akan ditampilkan dalam kod HTML anda. Buat gambar bersaiz berbeza, dan kemudian gunakan kod ini sebagai contoh untuk menentukan gambar mana yang akan digunakan pada layar lebar 600px dan 1500px:
