Uyğunlaşdırılmış dizaynda breakpoint nədir?

Cavab nöqtəsi (breakpoint) adaptiv dizaynda cihazın ekran genişliyinin keçdiyi və ya çatdığı sərhəd dəyəridir, bu dəyərə çatdıqda və ya keçdikdə səhifənin elementlərinin CSS stilləri dəyişir.

Cavab nöqtələrinin əsas məqsədi:

• Məzmunun optimal göstərilməsini təmin etmək: Müxtəlif ekran ölçülərində bloklar müxtəlif ölçülərə, mövqelərə və kənar boşluqlara sahib ola bilər.
• Elementləri gizlətmək/göstərmək: Məsələn, mobil cihazlarda yan panel gizlənə bilər, masaüstündə isə göstərilə bilər.
• Yazı tiplərini və şəkilləri dəyişdirmək: Daha yaxşı oxunaqlıq və performans üçün.

CSS-də media sorğuları vasitəsilə cavab nöqtələri təyin edilir:

/* Əsas stillər (mobil üçün əvvəlcədən) */
body {
  font-size: 16px;
}

/* 768px və yuxarı ekranlar üçün stillər */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
  .sidebar {
    display: block; /* Yan panel göstərilir */
  }
}

/* 1200px və yuxarı ekranlar üçün stillər */
@media screen and (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

Tipik cavab nöqtələri standart cihaz ölçülərinə əsaslanır, lakin xüsusi dizayna uyğun olaraq fərdiləşdirilə bilər. Standart cavab nöqtələrinin nümunələri:

Ekran ölçüsü	Tipik istifadə
576px-ə qədər	Çox kiçik (məsələn, köhnə smartfonlar portret rejimində)
576px - 768px	Kiçik (landşaft rejimində smartfonlar, kiçik planşetlər)
768px - 992px	Orta (portret rejimində planşetlər, noutbuklar)
992px - 1200px	Böyük (noutbuklar, masaüstü kompüterlər)
1200px və yuxarı	Çox böyük (böyük monitorlar)

"Mobile-first" dizaynını inkişaf etdirmək vacibdir, ən kiçik cavab nöqtələrindən başlamaq və daha böyük ekranlar üçün stillər əlavə etmək, bu da stillərin üst-üstə yazılmasını asanlaşdırır.