Memahami Breakpoints

Seiring dengan pemahaman viewport, Anda juga harus memiliki pemahaman yang baik tentang apa itu breakpoint. Sebuah breakpoint dalam desain responsive adalah lebar dimana situs web mengubah tata letak berdasarkan deklarasi media query. Biasanya sebuah situs responsive akan dibangun untuk bekerja dengan setidaknya dua tetapi normalnya tiga breakpoint yang berbeda dari jenis perangkat tertentu. Breakpoints yang paling sering digunakan adalah:

1. Perangkat Ekstra Kecil, Contoh handphone (<768px)
2. Perangkat Kecil, Misal Tablet (>=768px and <992px)
3. Perangkat Medium, Misal Komputer Desktop (>=992px and <1200px)
4. Perangkat Besar, Misal Komputer Desktop (>=1200px)

Selain Breakpoint, Potongan lainnya terminologi penting yang butuh Anda  pahami adalah state, yang merupakan versi situs diantara setiap breakpoint . Jadi ponsel, tablet, dan desktop state Anda diantara Anda memiliki dua breakpoint.

Ini penting bahwa media query merespon lebar viewport daripada lebar layar Anda. Inilah mengapa Anda dapat hanya dengan mengubah ukuran browser Anda sudah dapat menguji breakpoint Anda.