Breakpoint (Kırılma Noktası) Nedir?
Kısa tanım
Breakpoint (kırılma noktası), responsive bir tasarımda sayfa düzeninin değiştiği genişlik eşiğidir; örneğin tek sütunlu mobil düzenin 768 pikselden itibaren iki sütuna geçmesi. CSS'te genellikle media query ile, bileşen düzeyinde ise container query ile tanımlanır. İyi seçilmiş breakpoint'ler belirli cihaz modellerine göre değil, içeriğin mevcut düzende okunaksız veya sıkışık hâle geldiği noktaya göre belirlenir.
Diğer adları: kırılma noktası, kesme noktası, responsive breakpoint, CSS breakpoint
Cihaz listesine değil, içeriğe bakın
Breakpoint'leri "iPhone genişliği, tablet genişliği, masaüstü" diye seçmek cazip görünür, ama piyasadaki ekran genişlikleri sürekli değişir ve iki cihaz arasındaki her ara genişlik de birilerinin ekranıdır. Daha sağlam yaklaşım, düzeni en dar hâlinden başlatıp tarayıcı penceresini yavaşça genişletmektir. Satırların okunamayacak kadar uzadığı, kartların gereksiz boşlukla yayıldığı ya da menünün sığmayıp taştığı genişlik, o tasarımın gerçek breakpoint'idir.
Bu yüzden iki tür breakpoint'ten söz edilir: düzeni kökten değiştiren ana breakpoint'ler (tek sütundan çok sütuna geçiş, menünün açılır hâlden yatay hâle dönmesi) ve tek bir bileşeni düzelten küçük ayarlar (bir başlığın yazı boyutu, bir resmin konumu). Ana breakpoint sayısını az tutmak, bakımı ve testi kolaylaştırır.
Framework'lerin varsayılan değerleri
Popüler CSS framework'leri hazır bir set ile gelir. Bunlar birer standart değil, makul başlangıç noktalarıdır:
| Ad | Bootstrap 5.3 | Tailwind CSS |
|---|---|---|
| sm | 576px | 40rem (640px) |
| md | 768px | 48rem (768px) |
| lg | 992px | 64rem (1024px) |
| xl | 1200px | 80rem (1280px) |
| xxl / 2xl | 1400px | 96rem (1536px) |
İkisi de mobile-first çalışır: önekli bir sınıf (md:) o genişlikte ve üzerinde geçerlidir. Android'in uygulama tarafında kullandığı pencere boyutu sınıfları ise farklı bir mantık izler: 600dp altı "compact", 600–839dp "medium", 840dp ve üzeri "expanded" ve daha geniş sınıflar.
Kodda breakpoint yazmak
Breakpoint'ler CSS'te media query koşulu olarak yazılır. Değeri px yerine em veya rem ile vermek, kullanıcının tarayıcıdaki varsayılan yazı boyutunu büyüttüğü durumda düzenin metinle birlikte uyum sağlamasına yardım eder:
/* 48em ≈ 768px (16px varsayılan yazı boyutunda) */
@media (width >= 48em) {
.site-baslik { flex-direction: row; }
}
/* Yalnızca yükseklik kısaysa: yatay telefon ekranı */
@media (height < 30em) {
.hero { min-height: auto; }
}Bir sınırlama bilinmelidir: CSS özel değişkenleri (var(--md)) media query koşulunda kullanılamaz. Breakpoint değerlerini tek yerden yönetmek için Sass değişkenleri, framework yapılandırması veya bir design token dönüştürme adımı kullanılır. Tasarım dosyasındaki ile koddaki breakpoint'lerin aynı adı ve değeri taşıması, ekip içindeki "tablette nasıl görünüyor?" tartışmalarını somutlaştırır.
Ekran değil, alan: container query
Media query yalnızca viewport genişliğini bilir. Oysa aynı kart bileşeni geniş bir ana kolonda da dar bir kenar çubuğunda da kullanılabilir. Container query, bileşenin içinde bulunduğu kapsayıcının genişliğine göre karar vermesini sağlar; böylece breakpoint'ler sayfadan bileşene taşınır. Pratikte ikisi birlikte kullanılır: sayfa iskeleti media query ile, bileşen içi düzen container query ile değişir.
Breakpoint'leri test etmek
- Yalnızca tanımlı breakpoint'lerde değil, aralarındaki genişliklerde de (örneğin 900px veya 1100px) bakın; sorunların çoğu iki eşiğin arasında çıkar.
- 320 CSS pikseli genişliği deneyin; WCAG 2.2 içeriğin bu genişlikte yatay kaydırma olmadan okunabilmesini ister.
- Tarayıcı yakınlaştırmasını %200'e çıkarın; yakınlaştırma etkin viewport genişliğini daraltır ve daha küçük bir breakpoint'i tetikler.
- Gerçek içerikle test edin: uzun Türkçe kelimeler ve iki satıra taşan buton metinleri, yer tutucu metinle hiç görünmeyen breakpoint ihtiyaçları doğurur.
Breakpoint'ler daha geniş bir responsive tasarım stratejisinin yalnızca bir aracıdır; akışkan genişlikler ve esnek düzenler ne kadar iyi kurulursa o kadar az breakpoint gerekir.