Cara menggunakan breakpoint CSS untuk membuat desain responsif

Keberhasilan sebuah situs web sangat bergantung pada pengalaman pengguna. Saat ini, pengguna mengakses situs web dari banyak perangkat berbeda, dan memberikan pengalaman pengguna yang setara di setiap perangkat dapat menjadi tantangan. Di situlah breakpoint CSS bisa berguna.

Breakpoint CSS bisa sangat bermanfaat untuk membuat situs responsif yang memberikan pengalaman pengguna yang luar biasa di perangkat apa pun, tetapi mereka juga tetap menjadi salah satu aspek desain web yang lebih membingungkan, terutama bagi pengembang baru.

Mari kita mulai!

Apa itu breakpoint CSS?

Titik henti sementara CSS adalah titik di mana konten situs web merespons sesuai dengan lebar perangkat, memungkinkan Anda menampilkan tata letak terbaik kepada pengguna.

Titik henti sementara CSS juga disebut titik henti kueri media, karena digunakan dengan kueri media.

Dalam contoh ini, Anda dapat melihat bagaimana tata letak menyesuaikan dengan ukuran layar. Tata letak pada resolusi besar memiliki tata letak header dan dua kolom tetapi dalam perangkat kecil itu berubah menjadi tata letak satu kolom.

Cara mengatur breakpoint CSS

Bagian yang sulit adalah menentukan breakpoint sendiri. Tidak ada templat standar, dan kerangka kerja yang berbeda menggunakan titik henti sementara yang berbeda.

Jadi pendekatan apa yang harus Anda adopsi untuk breakpoints Anda?

Ada dua kemungkinan pendekatan untuk diikuti:

• Breakpoint berdasarkan perangkat
• Breakpoint berdasarkan konten

Breakpoint CSS berdasarkan perangkat

Memutuskan breakpoint berdasarkan perangkat yang berbeda terdengar seperti ide yang bagus, tetapi pada kenyataannya, itu tidak selalu merupakan pendekatan terbaik. Kami sudah memiliki cukup banyak perangkat yang perlu dikhawatirkan, dan ketika yang baru keluar dengan lebar yang berbeda, kembali ke CSS Anda dan menambahkan breakpoint baru lagi akan memakan waktu.

Meskipun demikian, ini masih merupakan opsi yang layak, karena Anda mungkin merasa itu cocok untuk Anda. Berikut ini contoh breakpoint khusus perangkat:

 [css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- Google Pixel ----------- */ /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }[/css]

Dengan pendekatan ini, Anda akan memiliki daftar besar kueri media.

Breakpoint CSS berdasarkan konten

Pilihan ideal untuk memutuskan breakpoint didasarkan pada konten situs Anda. Metode ini memungkinkan Anda untuk menambahkan titik henti sementara di mana konten Anda memerlukan penyesuaian tata letak. Ini akan membuat kueri media Anda jauh lebih sederhana dan mudah dikelola.

Breakpoint ini berarti CSS akan diterapkan saat lebar perangkat 768px ke atas.

 [css]@media only screen (min-width: 768px){ ... }[/css]

Anda juga dapat mengatur rentang dengan titik putus, sehingga CSS hanya akan berlaku dalam batas tersebut.

 [css]@media only screen and (min-width: 768px) and (max-width: 959px){ ... }[/css]

Kapan menggunakan breakpoint CSS min atau max-width

Anda dapat mengatur breakpoint dengan cara yang berbeda menggunakan min-width , max-width , atau bahkan dengan menggabungkan keduanya. Tetapi pertanyaannya adalah, kapan Anda harus menggunakan masing-masing?

Untuk menjawabnya dengan cara yang sederhana, jika Anda mendesain tata letak dengan pendekatan yang mengutamakan seluler, gunakan titik putus lebar minimum dan tingkatkan cara Anda.

Atur gaya default Anda untuk perangkat kecil dan sesuaikan untuk perangkat yang lebih besar.

Demikian juga, jika Anda mendesain untuk perangkat yang lebih besar terlebih dahulu, maka atur CSS default Anda seperti biasa dan sesuaikan untuk perangkat yang lebih kecil dengan pendekatan lebar maksimum.

Menggunakan breakpoint CSS dengan SASS

Jika Anda menggunakan praprosesor seperti SASS atau SCSS, Anda dapat menulis breakpoint yang jauh lebih cerdas. Mixin memungkinkan Anda membuat lebih banyak breakpoint deklaratif untuk diingat, seperti ini:

 [css]@mixin tablet-up { @media only screen (min-width: 768px) { @content; } }[/css]

Saat bekerja dalam grup, lebih mudah mengingat "tablet-up" daripada 768px atau 48em. Siapapun dapat memahami breakpoint ini; itu untuk tablet dan ukuran layar di atas.

Breakpoint CSS mana yang akan digunakan

Kami telah melihat cara menggunakan breakpoint dan kapan menggunakannya, tetapi pertanyaannya tetap ada: breakpoint spesifik apa yang harus Anda gunakan?

Mari kita uraikan sedikit. Anda perlu menargetkan ukuran desktop, tablet, dan khusus seluler. Anda dapat memeriksa beberapa kerangka kerja populer untuk mendapatkan gambaran tentang pendekatan apa yang harus diikuti.

Bootstrap memiliki breakpoint pada 576px, 768px, 992px, dan 1200px. Foundation terutama memiliki breakpoint pada 40em dan 64em. Di Bulma, breakpoint ditetapkan pada 768px, 769px, 1024px, 1216px, dan 1408px.

Masing-masing memiliki breakpoint yang berbeda tetapi satu kesamaan yang mereka miliki adalah pendekatan mobile-first. Anda dapat menggunakan salah satu dari breakpoint ini sebagai titik awal atau Anda dapat membuatnya sendiri, seperti ini:

 [css]@media (min-width: 640px){ ... } @media (min-width: 768px){ ... } @media (min-width: 1024px){ ... } @media (min-width: 1200px){ ... }[/css]

Anda mendapatkan ide!

Membungkus

Singkatnya, breakpoint CSS adalah cara yang bagus untuk merestrukturisasi tata letak Anda untuk memberikan pengalaman pengguna terbaik di berbagai perangkat.

Selalu coba buat breakpoint berdasarkan konten Anda sendiri, bukan perangkat. Pisahkan mereka ke lebar logis daripada lebar acak dan pertahankan ke jumlah yang dapat dikelola, jadi modifikasi tetap sederhana dan jelas.

Apa breakpoint CSS yang Anda gunakan untuk tata letak Anda? Beri tahu kami di bagian komentar di bawah.

Apa berikutnya?

Buat dan uji blok Gutenberg kustom Anda dengan Lokal gratis!

Pelajari lebih lanjut tentang Lokal di sini!

Untuk saran lebih lanjut tentang membangun situs responsif, lihat artikel ini!

• Cara membuat situs WordPress Anda mobile-friendly
• Cara membuat menu navigasi responsif di WordPress
• 7 tips praktik terbaik untuk desain web responsif