Breakpoint
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 terlalu besar, menu masih disembunyikan dalam hamburger icon. Namun layout bisa diubah menjadi 2 column.
Pada desktop, karena layar sudah cukup besar, menu ditampilkan. Layout dalam mode full, misalnya menjadi 3 column.
Minor Breakpoint
Breakpoint diatas dapat dikategorikan sebagai major breakpoint. Sementara minor breakpoint, biasanya tidak terjadi perubahan layout. Minor breakpoint lebih fokus ke estetika, misal pada pertengahan antara ukuran ponsel dan tablet, kita membesarkan ukuran font.
Minor breakpoint akan membuat website nampak lebih “bersinar”.
Contoh Breakpoint
Berikut contoh breakpoint dari portal berita CNN. Kurang lebih diterapkan 3 major breakpoint. Mode ponsel, tablet dan desktop.
Pada mode ponsel, menu disembunyikan dalam hamburger icon, konten stacking kebawah.
Pada mode tablet, menu masih disembunyikan dalam hamburger icon, image lebih besar dan caption dimasukan kedalam area image. Layout dibawah image juga menjadi 3 column.
Pada mode desktop, menu ditampilkan. Layout diubah menjadi 5 column.
Tidak ada komentar:
Posting Komentar
Gunakanlah kata yang sopan