Kemudian, kita menentukan ukuran layar maksimum yang kita inginkan dengan max-width: 768px. Akhirnya, kita menambahkan kode CSS yang ingin kita terapkan ketika media query dijalankan.
Menggunakan grid dan flexbox
Selain menggunakan media query, kita juga dapat menggunakan teknik CSS seperti grid dan flexbox untuk membuat halaman web yang responsif. Grid dan flexbox adalah teknik layout CSS yang memungkinkan kita untuk mengatur tata letak elemen pada halaman web dengan lebih mudah dan efisien.
Dengan menggunakan grid dan flexbox, kita dapat membuat halaman web yang responsif dengan cepat dan mudah. Contoh penggunaan grid untuk membuat halaman web responsif
Konten 1Konten 2Konten 3
Dalam contoh di atas, kita menggunakan class container untuk mengelompokkan elemen-elemen halaman web menjadi satu blok.
Selanjutnya, kita menggunakan class row untuk membuat baris, dan class col-sm-6 col-md-4 untuk membuat kolom. Class col-sm-6 menunjukkan bahwa elemen tersebut akan menempati 6 dari 12 kolom pada layar ponsel, sedangkan class col-md-4 menunjukkan bahwa elemen tersebut akan menempati 4 dari 12 kolom pada layar desktop.
Dengan penggunaan class seperti ini, kita dapat mengatur tata letak elemen dengan lebih mudah dan efisien. Ketika layar berubah ukuran, grid akan menyesuaikan tata letak elemen secara otomatis sehingga halaman web tetap responsif.
Dalam kesimpulan, penggunaan media query, grid, dan flexbox adalah teknik yang sangat berguna dalam pembuatan halaman web responsif. Dengan menggunakan teknik-teknik ini, kita dapat mengatur tampilan halaman web dan tata letak elemen dengan lebih mudah dan efisien, sehingga pengalaman pengguna dapat ditingkatkan.
Dalam pembuatan halaman web responsif, penggunaan media query, grid, dan flexbox dapat menjadi kunci sukses. Media query memungkinkan kita untuk mengatur tampilan halaman web berdasarkan ukuran layar pengguna, sedangkan grid dan flexbox memungkinkan kita untuk mengatur tata letak elemen dengan lebih mudah dan efisien.
Follow us on
