Banyak smartphone dan device lainnya yang memiliki browser serta akses ke internet,
membuat WebDesigner harus
memikirkan banyak trik untuk membuat websitenya tetap dapat
diakses dari manapun tanpa merusak desain yang sudah dibuatnya untuk tampilan desktop.
membuat WebDesigner harus
memikirkan banyak trik untuk membuat websitenya tetap dapat
diakses dari manapun tanpa merusak desain yang sudah dibuatnya untuk tampilan desktop.
Sebelumnya para pembuat website biasa membuat dua tampilan situs,
misalkan
misalkan
namadomain.com ketika dibuka di smartphone/mobile maka akan dialihkan ke m.namadomain.comdan sebagainya. Namun dengan adanya CSS3 Media Queries yang belakangan ini banyak dibicarakan dan sampai menjadikan sebuah tren web baru Responsive Web Design, semua dapat dilakukan tanpa harus membuat dua tampilan. Satu untuk desktop dan satu untuk mobile. Merepotkan.Mari Memulai!
Cukup mudah, kamu tinggal menambahkan
@media ke dalam css websitemu.
@media only screen and (max-width: 699px) {
/* Tambahkan CSS untuk ukuran layar maksimal 699px (dari 0px - 699px) */
}
@media only screen and (min-width: 1000px) {
/* Tambahkan CSS untuk ukuran layar minimal 1000px (dari 1000px - ~) */
}
@media only screen and (min-width: 700px) and (max-width: 999px) {
/* Tambahkan CSS untuk ukuran layar minimal 700px dan maksimal 999px (700px - 999px) */
}
Untuk mencobanya, kamu bisa me-resize browser yang kamu pakai.
Agar lebih spesifik lagi, kita harus menentukan target layar dari website yang akan diakses diberbagai device. Untuk smartphone biasanya berukuran kurang dari 320px di portrait mode dan kurang dari 480px di landscape mode. Tablet berukuran sekitar 768px – 1024px. Dan desktop dengan width yang lebih besar.
Sehingga bisa kita buat seperti ini.
@media only screen and (max-width: 1024px) {
/* Desktop, Tablet & Mobile. */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* Desktop & Tablet */
}
@media only screen and (max-width: 767px) {
/* Tablet (Portrait) */
}
@media only screen and (min-wdth: 480px) and (max-width: 767px) {
/* Tablet (Portrait) & Mobile (Landscape) */
}
@media only screen and (max-width: 479px) {
/* Mobile */
}
1024px disini adalah besar layar yang nantinya akan dipakai untuk
width website kita. Kamu bisa menggantinya dengan 960px (yang biasa banyak dipakai), atau sesuai dengan ukuran yang biasa kamu gunakan untuk lebar websitemu sendiri.Tambahan Meta untuk Browser iOS & Android
Browser bawaan untuk smartphone, misalkan pada iOS & Android biasanya menggunakan zoom default yang berbeda-beda. Dan itu sama sekali membuat media queries yang sudah kita buat terkadang menjadi tidak pas. Untuk itu kita perlu menambahkan
meta baru di head website yang kita buat.<meta name="viewport" content="width=device-width,initial-scale=1.0" />
width=device-width akan mengatur width sesuai dengan width di device yang digunakan. Dan initial-scale=1.0 akan men-zoom sesuai dengan ukuran valuenya. 1.0 berarti berskala 1:1 dengan aslinya, dan kamu bisa menggantinya.Tips
- Letakkan media queries dipaling bawah setelah style default bawaan. Jadi, style default tidak akan ikut terbawa jika media queries sudah ditentukan untuk suatu ukuran layar tertentu.
- Urutkan media queries dari urutan yang paling besar ke-kecil. Terkadang ada beberapa style yang tabrakan dengan style lainnya yang sudah didefinisikan diatasnya.
