რა უნდა ითქვას CSS-ში ამ ბრეიკპოინტების კონფიგურაციისა და გამოყენებისთვის?

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

ძირითადი პარამეტრები:

• width / height: ხედი-ის სიგანე/სიმაღლე.
• min-width / min-height: მინიმალური სიგანე/სიმაღლე.
• max-width / max-height: მაქსიმალური სიგანე/სიმაღლე.
• orientation: მოწყობილობის განლაგება (portrait ან landscape).

გამოყენების მაგალითი — ბრეიკპოინტების კონფიგურაცია:

/* საწყის სტილები მცირე ეკრანებისთვის 768px-მდე */
body {
  font-size: 16px;
}

/* ბრეიკპოინტი 768px-დან 991px-მდე ეკრანებისთვის */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* ბრეიკპოინტი 992px-ზე და ზევით */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

საკმარისად გავრცელებული სტრატეგიები:

1. Mobile First: თავდაპირველად განსაზღვრულია სტილები მცირე ეკრანებისთვის, შემდეგ დამატებულია min-width მედია დოკუმენტები უფრო ფართო ეკრანებისთვის.
2. Desktop First: თავდაპირველად განსაზღვრულია სტილები დიდ ეკრანებისთვის, შემდეგ დამატებულია max-width მედია დოკუმენტები სქელი ეკრანებისთვის.

სტრატეგიის არჩევა პროექტის და პრეფერენციების მიხედვით:

სტანდარტული ბრეიკპოინტების მნიშვნელობები (შუამავალი, ფრეიმვორკის ან შეთანხმების მიხედვით):

მოწყობილობა	სიგანე დიაპაზონი	მედია დოკუმენტი (Mobile First)	მედია დოკუმენტი (Desktop First)
პატარა ტელეფონები	< 576px	არ არის (ძირითადი სტილები)	@media (max-width: 575.98px)
ტელეფონები	>= 576px	@media (min-width: 576px)	@media (max-width: 767.98px)
პლანშეტები	>= 768px	@media (min-width: 768px)	@media (max-width: 991.98px)
ლეპტოპები	>= 992px	@media (min-width: 992px)	@media (max-width: 1199.98px)
დესკტოპები	>= 1200px	@media (min-width: 1200px)	@media (max-width: 1399.98px)
დიდი დესკტოპები	>= 1400px	@media (min-width: 1400px)	არ არის (ძირითადი სტილები)

მნიშვნელოვანია, რომ ბრეიკპოინტები შეირჩევა კონტენტის და განლაგების მიხედვით, არა მოწყობილობის სტანდარტების. ისინი უნდა აქტივირდნენ იქ, სადაც განლაგება იწყებს «დამტვრევას».