Kategori: Alat pengembang
Cheatsheet Breakpoint Responsif
Bandingkan breakpoint antar-framework, atau buat sendiri
Bandingkan breakpoint min-width default yang dipakai Tailwind, Bootstrap, Bulma, dan Material Design, salin media query siap pakai untuk salah satunya, atau masukkan nama dan lebar breakpoint Anda sendiri untuk membuat yang kustom.
| Nama | Min-width |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
@media (min-width: 640px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1024px) {
/* lg */
}
@media (min-width: 1280px) {
/* xl */
}
@media (min-width: 1536px) {
/* 2xl */
}Masukkan nama dan lebar dalam piksel per baris, misalnya "md, 768".
| Nama | Min-width |
|---|---|
| sm | 480px |
| md | 768px |
| lg | 1100px |
| xl | 1440px |
@media (min-width: 480px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1100px) {
/* lg */
}
@media (min-width: 1440px) {
/* xl */
}Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.
Apa fungsi alat ini
Setiap framework CSS memilih nama dan lebar piksel breakpoint-nya sendiri, sehingga mudah keliru mengingat mana yang berlaku saat Anda berpindah antar-proyek. Alat ini menampilkan nilai default empat framework populer secara berdampingan dan mengubah salah satunya — atau daftar kustom yang Anda ketik — menjadi blok @media (min-width: …) yang siap ditempel.
Cara memakainya
- Pilih sebuah framework untuk melihat breakpoint default dan media query-nya.
- Salin CSS yang dihasilkan untuk breakpoint yang Anda perlukan.
- Atau daftarkan nama dan lebar breakpoint Anda sendiri untuk membangun query kustom.
Privasi
Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.
Pertanyaan yang sering diajukan
- Mengapa min-width, bukan max-width?
- Pendekatan mobile-first berbasis min-width berarti gaya dasar menyasar layar terkecil dan setiap breakpoint menambahkan gaya untuk layar yang lebih besar, sehingga menghindari aturan yang saling menimpa bolak-balik seperti pada pendekatan breakpoint milik framework itu sendiri.
- Apakah nilai ini sesuai persis dengan default framework aslinya?
- Ya, ini adalah breakpoint default yang terdokumentasi resmi untuk masing-masing framework. Jika proyek Anda memiliki konfigurasi Tailwind atau Bootstrap kustom, gunakan pembuat breakpoint kustom dengan nilai proyek Anda sendiri.
- Bagaimana format daftar breakpoint kustom?
- Satu breakpoint per baris, berupa nama dan lebar piksel yang dipisahkan koma atau spasi, misalnya "md, 768".