რა არის ბრეიკპოინტი რეაგირებადი დიზაინში?

Breakpoints (breakpoint) ადაპტაციურ განლაგებაში არის მოწყობილობის ეკრანის სიგანის ზღვარი, რომლის მიღწევაზე ან გადაკვეთისას იცვლება გვერდის ელემენტების CSS სტილები.

Breakpoints-ის ძირითადი დანიშნულება:

• შინაარსის ოპტიმალური ჩვენების უზრუნველყოფა: სხვადასხვა ზომის ეკრანებზე ბლოკებს შეიძლება ჰქონდეთ სხვადასხვა ზომა, განლაგება, მარყუჟები.
• ელემენტების დამალვა/გამოჩენა: მაგალითად, მობილურ მოწყობილობებზე შეიძლება დამალოთ გვერდითი პანელი, ხოლო დესკტოპებზე — გამოაჩინოთ.
• ფონტებისა და სურათების შეცვლა: უკეთესი წაკითხულობისა და პროდუქტიულობისთვის.

Breakpoints-ები განისაზღვრება მედია სვიჩებით (media queries) CSS-ში:

/* საწყისი სტილები (მობილურებისთვის პირველი) */
body {
  font-size: 16px;
}

/* სტილები 768px-ზე და ზევით ეკრანებისთვის */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
  .sidebar {
    display: block; /* ჩვენება გვერდითი პანელის */
  }
}

/* სტილები 1200px-ზე და ზევით ეკრანებისთვის */
@media screen and (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

ტიპიური breakpoints დაფუძნებულია სტანდარტულ მოწყობილობის ზომებზე, მაგრამ შეიძლება იყოს მორგებული კონკრეტული დიზაინის მიხედვით. სტანდარტული breakpoints-ის მაგალითები:

ეკრანის ზომა	ტრადიციული გამოყენება
მდე 576px	ძალიან პატარა (მაგალითად, ძველი სმარტფონები პორტრეტის რეჟიმში)
576px - 768px	პატარა (სმარტფონები ლანდშაფტში, მცირე ტაბლეტები)
768px - 992px	საშუალო (ტაბლეტები პორტრეტში, ლეპტოპები)
992px - 1200px	დიდი (ლეპტოპები, დესკტოპები)
ზევით 1200px - 1400px+	ძალიან დიდი (დიდი მონიტორები)

მნიშვნელოვანია დიზაინის "mobile-first" განვითარება, დაწყებული ყველაზე პატარა breakpoints-ით და დამატებით სტილებით დიდი ეკრანებისთვის, რაც ამარტივებს სტილების გადაფარვას.