Artikel ini menunjukkan langkah-langkah untuk membuat desain situs web yang responsif dalam HTML dan CSS menggunakan:
Bagaimana Cara Membuat Desain Website Responsif dengan HTML dan CSS?
Membuat desain situs web yang responsif dengan HTML dan CSS melibatkan pembuatan tata letak yang menyesuaikan dengan berbagai ukuran dan resolusi layar. Berikut adalah langkah-langkah yang dapat Anda ikuti untuk membuat desain website yang responsif:
Langkah 1: Tag Meta Area Pandang
“ area pandang ” meta tag memainkan peran penting dalam pembuatan desain web yang responsif. Itu dimasukkan ke dalam '
< meta nama = 'area pandang' isi = 'width=device-width,initial-scale=1' / >
Tag meta di atas memiliki dua atribut:
- “ nama ” Atribut memberi tahu nama fungsi yang membuat/menggunakan tag ini. Misalnya, menyetel “ area pandang ' ke ' nama ” atribut untuk menangani viewport perangkat yang berbeda.
- “ isi ” atribut mendefinisikan nilai atribut sebelumnya. Ini mengatur lebar setiap perangkat dan menskalakan dokumen/halaman web menjadi 100%.
Langkah 2: Gambar Responsif
Karena ukuran gambar bervariasi satu sama lain, oleh karena itu, sulit untuk menetapkan “ tinggi ' atau ' lebar ” properti untuk setiap gambar. Ketika ukuran gambar sudah tetap maka pengguna tidak mengubah ukuran gambar halaman web dengan layar. Namun, pengguna dapat mengatur gambar responsif melalui kode berikut:
img {
maks- lebar : 100 %;
}
“ max-width ” Properti CSS membatasi gambar agar tidak ditampilkan di dalam ruang yang dialokasikan. Dengan menyetel nilai dalam '%', ukuran gambar akan diubah bersama dengan ukuran elemen induknya. Ini menciptakan efek responsif untuk gambar.
Langkah 3: Tata Letak Flexbox
Tata letak Flexbox sangat disarankan untuk membuat desain situs web yang responsif. Ini memungkinkan elemen HTML untuk ditampilkan pada posisi tertentu dan mengubah ukuran ruang yang tersedia untuk setiap anak sesuai dengan ukuran yang tersedia oleh div induk. Tata letak Flexbox berisi beberapa properti yang memberikan banyak kebebasan kepada pengembang seperti pada kode di bawah ini:
< gaya >
.induk {
tampilan: fleksibel;
}
.anak {
melenturkan: 1 ;
teks- meluruskan : tengah;
}
< / gaya >
< tubuh >
< div kelas = 'induk' >
< div kelas = 'anak' gaya = 'perbatasan: 3px solid blueviolet;' >Selamat datang< / div >
< div kelas = 'anak' gaya = 'batas: 3px hijau tua pekat;' > untuk < / div >
< div kelas = 'anak' gaya = 'perbatasan: 3px merah pekat;' >Linuxint< / div >
< / div >
< / tubuh >
Dalam cuplikan kode di atas:
- Pertama, buat elemen div induk dengan id “ induk ' di dalam '
” tag. - Selanjutnya, buat beberapa elemen div turunan dan beri mereka kelas “ anak ”.
- Kemudian, pilih “ induk ” dan berikan nilai “ melenturkan ' untuk CSS ' menampilkan ' Properti.
- Setelah itu berikan nilai “ 1 ' ke ' melenturkan ” milik masing-masing “ anak ” yang membuat elemen anak ditampilkan sebagai flex.
Setelah mengeksekusi kode di atas, halaman web terlihat seperti ini:
Output di atas menampilkan bahwa elemen anak mendapatkan lebar yang sama saat browser diubah ukurannya.
Langkah 4: Tata Letak Kisi
Tata letak kisi membuat kisi dan menetapkan elemen HTML di dalam bagian kisi. Elemen grid berubah relatif terhadap ukuran layar halaman web. Itu membuat desain responsif karena ukuran elemen HTML berubah sesuai dengan layar perangkat:
< gaya >.wadah {
tampilan: kisi;
kisi-templat-kolom: 1fr 1fr 1fr;
}
< / gaya >
< tubuh >
< div kelas = 'komponen' >
< div gaya = 'perbatasan: 3px hijau hutan padat;' >Linuxint< / div >
< div gaya = 'batas: 3px hijau tua pekat;' >Linuxint< / div >
< div gaya = 'perbatasan: 3px merah pekat;' >Linuxint< / div >
< / div >
< / tubuh >
Dalam kode di atas:
- Pertama, buat div induk dan berikan kelas ' komponen ' di dalam '
” tag. Setelah itu, buat tiga elemen div anak di dalamnya. - Kemudian, dalam file CSS tetapkan “ kisi nilai ” ke “ menampilkan ” properti untuk “ wadah ” div.
- Setelah itu, buat tiga bagian berukuran sama di halaman web menggunakan “ kisi-templat-kolom ” properti dan atur sama dengan “ 1fr 1fr 1fr 'di mana fr berarti' pecahan ”.
Setelah mengkompilasi kode di atas, hasilnya terlihat seperti ini:
Output menampilkan bahwa div mengubah ukurannya sendiri sesuai dengan ukuran layar dengan proporsi yang sama.
Langkah 5: Kueri Media
Penggunaan kueri media untuk membuat desain responsif adalah hal yang kuno, tetapi sebagian besar situs web masih menggunakan kueri media. Kueri media dapat ditambahkan langsung ke file CSS setelah menambahkan gaya default untuk elemen HTML yang dipilih. Kueri media membuat kode sedikit lebih panjang dan berantakan. Karena pengembang perlu memasukkan kode untuk setiap ukuran layar secara terpisah.
Misalnya, lihat cuplikan kode di bawah ini:
@ media layar dan ( min- lebar : 640px ) {.komponen {
latar belakang- warna : hutan hijau;
}
}
Dalam cuplikan kode di atas:
- Pertama, setel kueri media yang menerapkan properti CSS ke kelas elemen yang dipilih “ komponen ” saat lebar ukuran layar lebih besar dari “ 640px ”.
- Selanjutnya, pilih 'kelas komponen dan atur nilai' hutan hijau ' Untuk ' warna latar belakang ' Properti.
.komponen {
latar belakang- warna : dodgerblue;
}
}
Kemudian untuk potongan kode di atas:
- Setel kueri media untuk menerapkan gaya saat ukuran lebar lebih kecil dari “ 1000px ”.
- Sekarang, pilih “ komponen ” dan berikan nilai “ dodgerblue ' Untuk ' warna latar belakang ' Properti:
Setelah mengeksekusi cuplikan kode di atas, hasilnya terlihat seperti ini:
Keluaran menampilkan bahwa kueri media mengubah latar belakang berdasarkan ukuran layar. Ukuran font, lebar, tinggi, dan properti CSS lainnya juga dapat diterapkan dengan mengikuti pola yang sama.
Kemungkinan ukuran layar breakpoint untuk dipertimbangkan saat menggunakan kueri media adalah:
- Untuk ' kecil ” ukuran layar, atur lebarnya lebih kecil dari “ 640px ”.
- Untuk ' sedang ” ukuran layar viewport, lebarnya berkisar antara “ 641px ' Dan ' 1007px ”.
- Untuk ' besar ” ukuran layar, atur lebarnya menjadi “ 1008px ' atau lebih besar.
Kesimpulan
Untuk membuat desain situs web yang responsif, pengembang perlu menambahkan “ area pandang ” tag di “