Duyarlı tasarımda breakpoint nedir?

Duyarlı tasarımda (breakpoint) olan kırılma noktası, cihazın ekran genişliğinin eşik değeridir ve bu değere ulaşılması veya aşılmasıyla sayfa öğelerinin CSS stilleri değişir.

Breakpoints'un temel amacı:

• İçeriğin optimal görüntülenmesini sağlamak: Farklı ekran boyutlarında bloklar farklı boyutlara, konumlara ve boşluklara sahip olabilir.
• Öğeleri gizleme/gösterme: Örneğin, mobil cihazlarda yan panel gizlenebilir, masaüstlerinde gösterilebilir.
• Yazı tipleri ve resimleri değiştirme: Daha iyi okunabilirlik ve performans için.

CSS'te media queries kullanılarak breakpoints belirlenir:

/* Varsayılan stiller (mobil öncelikli) */
body {
  font-size: 16px;
}

/* 768px ve üzeri ekranlar için stiller */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
  .sidebar {
    display: block; /* Yan panel göster */
  }
}

/* 1200px ve üzeri ekranlar için stiller */
@media screen and (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

Tipik breakpoints, cihazların standart boyutlarına dayanır, ancak belirli tasarıma göre özelleştirilebilir. Standart breakpoints örnekleri:

Ekran Boyutu	Tipik Kullanım
576px'ye kadar	Çok küçük (örneğin, eski akıllı telefonlar portre modunda)
576px - 768px	Küçük (yan yatay modda telefonlar, küçük tabletler)
768px - 992px	Orta (portre modunda tabletler, dizüstü bilgisayarlar)
992px - 1200px	Büyük (dizüstü bilgisayarlar, masaüstleri)
1200px ve üzeri	Çok büyük (büyük monitörler)

"Mobile-first" tasarım geliştirmek önemlidir; en küçük breakpoints'ten başlayıp, daha büyük ekranlar için stiller eklemek, stillerin üzerine yazılmasını kolaylaştırır.