Bu breakpoint'leri yapılandırmak ve uygulamak için…

@media medya sorgusu kullanılır. İçinde, cihazın özellikleri veya görüntüleme alanına göre stillerin uygulanması için koşullar belirlenir.

Medya sorgularının temel parametreleri:

width / height: Görüntüleme alanının genişliği/yüksekliği.
min-width / min-height: Görüntüleme alanının minimum genişliği/yüksekliği.
max-width / max-height: Görüntüleme alanının maksimum genişliği/yüksekliği.
orientation: Cihazın yönelimi (portrait veya landscape).

Kullanım örneği, kırılma noktalarını ayarlamak için:

/* 768px'den küçük ekranlar için varsayılan stiller */
body {
  font-size: 16px;
}

/* 768px ile 991px arasında ekranlar için kırılma noktası */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* 992px ve üzeri ekranlar için kırılma noktası */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Kullanılan yaygın stratejiler:

Mobile First: En küçük ekranlar için stiller önce tanımlanır, sonra min-width ile daha geniş ekranlar için medya sorguları eklenir.
Desktop First: Büyük ekranlar için stiller önce tanımlanır, sonra max-width ile daha dar ekranlar için medya sorguları eklenir.

Strateji seçimi, proje ve tercihlere bağlıdır.

Standart kırılma noktası değerleri (yaklaşık, framework veya anlaşmaya bağlı):

Cihaz	Genişlik aralığı	Medya sorgusu (Mobile First)	Medya sorgusu (Desktop First)
Küçük telefonlar	< 576px	Yok (temel stiller)	`@media (max-width: 575.98px)`
Telefonlar	>= 576px	`@media (min-width: 576px)`	`@media (max-width: 767.98px)`
Tabletler	>= 768px	`@media (min-width: 768px)`	`@media (max-width: 991.98px)`
Dizüstü bilgisayarlar	>= 992px	`@media (min-width: 992px)`	`@media (max-width: 1199.98px)`
Masaüstleri	>= 1200px	`@media (min-width: 1200px)`	`@media (max-width: 1399.98px)`
Büyük masaüstleri	>= 1400px	`@media (min-width: 1400px)`	Yok (temel stiller)

İçerik ve tasarım temel alınarak kırılma noktalarının seçilmesi önemlidir, sadece cihaz standartlarına göre değil. Tasarımın 'kırılmaya' başladığı yerde aktif olmalıdırlar.

Bu breakpoint'leri yapılandırmak ve uygulamak için CSS'de ne belirtilmelidir?