- header
- class main ( terdiri dari class “.left”, “.middle” dan “.right”
- class footer
Untuk bagian
head
dari HTML jangan lupa di beri tag meta viewport, tag nya seperti ini:Mengatur Layout Dengan CSS
Struktur HTML telah selesai kita buat, namun layout nya belum terbentuk. Maka selanjutnya kita beri tambahan kode CSS agar membentuk layout yang terdiri dari 3 kolom, potongan kode css nya seperti berikut ini.
Mengatur Gambar Agar Menyesuaikan Layout
Gambar biasanya menjadi masalah jika ukuran nya lebih lebar dibanding layout, oleh karena itu kita harus tentukan script untuk gambar ini, kita buat gambar berukuran 100%, dengan begini maka gambar tidak akan pernah lebih lebar dibanding ukuran layout penampungnya.
Menjadi 2 Kolom Ketika di Tablet.
Layout akan kita buat berubah ketika ukuran layar 1080px, untuk ukuran 1080px ini sebenarnya bisa anda sesuaikan dengan kebutuhan, bisa saja 960px, atau 1000px, tergantung keinginan anda saja. Tapi sebenarnya kalau bisa sesuai dengan ukuran perangkat-perangkat yang banyak dipakai seperti iPad, Amazon kindle atau Galaxy Tab. Kode untuk merubah layout menjadi 2 kolom adalah seperti dibawah ini, kita bisa lihat bahwa untuk merubahnya kita menggunakan bantuan media query
@media screen and (max-width: 1080px)
yang artinya ketika ukuran layout maksimal 1080 maka tentukan CSS nya, CSS ini inherit dari kode CSS sebelumnya.
Kode CSS diatas bukan hanya untuk mengatur jumlah kolom, namun juga bisa melakukan perubahan-perubahan lain seperti merubah kolom kiri menjadi berwarna kuning, atau bisa juga merubah ukuran font, bahkan warna font, seperti yang kita lihat di class
.left
, ditambahkanbackground: #fff000;
untuk merubah background menjadi warna kuning.
Baca Juga: Cara Melakukan Test Responsive Web Design
Menjadi Satu Kolom Ketika di Ponsel
Layout untuk tablet tidak bisa kita pakai untuk mengakomodir ponsel, oleh karena itu ketika ukuran layar lebih kecil kita tentukan lagi css berikutnya, masih tetap dengan media query, kami merubahnya menjadi satu kolom pada ukuran 780px kebawah. Script nya adalah sebagai berikut.
Pada kode css diatas tidak ditentukan lagi lebar kolom, semua div dibuat
width: auto
yang artinya dibuat memenuhi lebar layar, akhirnya terbentuk lah layout yang hanya satu kolom.
Tidak ada komentar:
Posting Komentar