membuat tampilan website pas disegala ukuran layar

BAGAS25 - Hai,sahabat blogger.kalian pasti tahu yang namanya blog dan website bahkan ada yang punya kan?

Nah saat kalian membuat blog atau website pasti kalian membutuhkan yang namanya template nah kali ini admin gaz bakal ngajarin kalian cara membuat web pas disegala ukuran layar

Sebelumnya para pembuat website biasa membuat dua tampilan situs, misalkan namadomain.com ketika dibuka di smartphone/mobile maka akan dialihkan ke m.namadomain.com dan 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.
Sudah Bisa di …

Dari http://caniuse.com/#feat=css-mediaqueries, CSS3 Media Queries ini sudah bisa digunakan di semua browser terbaru, termasuk IE9 keatas dan browser bawaan Android, iOS dan Blackberry.

Jadi tunggu apa lagi, buat website-mu tetap rapi diakses dari mana saja.