რა არის mobile-first რესპონსიული სტრატეგია და როგორ ჯდება მასში container queries?

Question

Accepted Answer

**Mobile-first** ნიშნავს, რომ დაწერთ თქვენი საბაზო სტილებს **ყველაზე პატარა ეკრანზე**, შემდეგ *დაამატებთ* სირთულეს უფრო დიდი ეკრანებისთვის `min-width` მედია-კითხვებით — ის მხარდან, რომ დაიწყოთ სამუშაო მაგიდის დონიდან და რამეები წააბაროთ.

## Mobile-first პრაქტიკაში

```css
/* base: mobile — single column, simple */
.layout { display: grid; gap: 1rem; }

/* enhance for tablet and up */
@media (min-width: 768px) {
  .layout { grid-template-columns: 1fr 2fr; }
}
/* enhance further for desktop */
@media (min-width: 1200px) {
  .layout { grid-template-columns: 1fr 2fr 1fr; }
}
```

**რატომ ითამამებს mobile-first:** საბაზო CSS რჩება მინიმალური (მობილური იღებს მხოლოდ რასაც აჭირდება — კარგი მუშაობა სუსტ მოწყობილობებზე), და თქვენ *შეღებთ* სირთულეს, რაც უფრო ადვილი გასაგებია, ვიდრე მისი გადაწერა/წაშლა. ის ასევე შეესაბამება იმას, თუ როგორ რეფლოდება კონტენტი ბუნებრივად ერთი სვეტიდან მრავალ სვეტზე.

## მედია-კითხვების შეზღუდვა

მედია-კითხვები პასუხობენ **ვიუპორტზე** — მთელი ფანჯარა. მაგრამ ხელმეორდი კომპონენტი (ვთქვათ ბარათი) შეიძლება გამოჩნდეს ფართო მთავარ ფართობში *ან* ვიწრო გვერდითი პანელში იმავე გვერდზე. ვიუპორტის სიგანე არ შეუძლია გითხრას, რამდენი ადგილი აქვს რეალურად *კომპონენტს*.

## Container queries ხსნის ამას

```css
.card-wrapper {
  container-type: inline-size;  /* declare it a query container */
}

/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: auto 1fr; }
}
```

ახლა იგივე ბარათი ავტომატურად გადავიდა ჰორიზონტალურ განლაგებაზე, როცა *მისი კონტეინერი* არის ≥400px — იმის მიუხედავად, რომ ეკრანი დიდია ან იმ სიგანე სვეტშია. კომპონენტი ხდება ნამდვილი **კონტექსტ-დამოუკიდებელი და ხელმეორდი**.

## ისინი ერთმანეთს ავსებენ

- **მედია-კითხვები** — გვერდის დონის განლაგება, გლობალური ბრეიქპოინტი, მომხმარებლის პარამეტრები (მუქი რეჟიმი, შემცირებული მოძრაობა).
- **Container queries** — კომპონენტის დონის რესპონსიულობა ხელმეორდი კომპონენტებისთვის.

## რატომ მნიშვნელოვანია ეს

Mobile-first ტოვებს რესპონსიულ CSS-ს მეწამე და მდგრადად.

Container queries არის დიდი წინსვლა: ისინი კომპონენტებს აძლევენ საშუალებას, რომ მოეგვარონ მათი *საკუთარი* ხელმისაწვდომი სივრცე, რაც ზუსტად ის უნდა, რასაც სჭირდებათ კომპონენტ-საფუძველზე აგებულ არქიტექტურაში (დიზაინის სისტემები, ხელმეორდი ბარათი/ვიჯეტები) სადაც იგივე კომპონენტი მრავალი კონტექსტში მოხვდება.