Responsive Web

Breakpoint adalah saat layout dari halaman web berubah atau responsive . Umumnya breakpoint terjadi saat ukuran viewport membesar atau mengecil. Hal yang paling umum, minimum ada 3 breakpoint, yaitu layout untuk ponsel, tablet dan desktop. Pada ponsel, menu akan disembunyikan dalam icon hamburger. Umumnya layout berupa column stack kebawah. Pada table, karena layar masih belum … Read more

Media query adalah fungsi dari css untuk menggunakan css tertentu jika syarat yang ditentukan dipenuhi. Media query merupakan komponen penting untuk membuat web responsive layout. Contoh menggunakan media query: Perintah diatas menunjukan browser agar load file s300.css bila ukuran viewport <= 300px dengan media screen. Property media yang disupport adalah screen, print, speech dan all. … Read more

Langkah pertama agar layout web responsive, kita harus mendefinisikan viewport dengan element meta-tag. Property width digunakan untuk mengatur ukuran viewport. Dapat diisi dengan angka spesifik, misalnya 600, maka viewport akan berukuran 600 pixels. Namun pendekatan ini kurang flexible, karena setiap device memiliki ukuran yang berbeda. Gunakan device-width, agar lebar viewport akan 100% dalam CSS pixels. … Read more

Display Pixels Ratio sering juga disebut CSS Pixels Ratio, adalah perbandingan antara logikal pixels dengan hardware pixels. Viewport tidak menggunakan hardware pixels , tetapi logikal pixels yaitu DIP (Device Independent Pixels). Contoh, iPhone 5s, resolusi hardware 640 x 1136 pixels dengan DPR 2, maka resolusi yang akan digunakan pada viewport adalah 320 x 568 pixels … Read more