CSS - Perkiraan Breakpoint

Ukuran pastinya tidak menentu, karena mengukur pixel bukan lebar asli layar perangkat, tapi masih bisa di ambil rata rata atau umumnya aja, seperti berikut ini

sm: 36em = 576px
md: 48em = 768px
lg: 62em = 992px
xl: 75em = 1200px
2xl: 87.5em = 1400px

Penjelasan

Kira-kira pemetaan perangkatnya begini:

• sm (≥576px) → Smartphone besar (iPhone Plus, beberapa Android mid-high) & layar kecil dalam mode portrait.
• md (≥768px) → Tablet portrait, atau smartphone besar dalam mode landscape.
• lg (≥992px) → Tablet landscape, laptop kecil (11–13 inch).
• xl (≥1200px) → Laptop/desktop standar (14–16 inch).
• 2xl (≥1400px) → Monitor besar / desktop wide (17–24 inch ke atas).

Catatan penting Ini bukan aturan mutlak, karena tiap perangkat bisa punya resolusi & pixel density berbeda (misalnya iPhone 14 Pro Max resolusinya tinggi banget tapi layout tetap dihitung pakai CSS pixel).