როგორ აშლებს მედია მოთხოვნები რესპონსიულ დიზაინს?

Question

Accepted Answer

**მედია მოთხოვნები** ნებისმიერი CSS-ს პირობითად იყენებენ устройства მახასიათებელების მიხედვით — რაც ყველაზე ხშირად **viewport-ის სიგანე** — რაც ერთ სტილის ფურცელს აქცევს ტელეფონებში, ტაბლეტებსა და სამუშაო სტაციებზე დაკონფიგურებულებს.

```css
/* base styles (mobile-first) */
.container { padding: 1rem; }

/* apply only when viewport is AT LEAST 768px wide */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}
```

## მობილური-პირველი (min-width) და დესკტოპი-პირველი (max-width)

```css
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }

/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
```

**მობილური-პირველი** (`min-width`) ჩვეულებრივ სასურველია: თქვენ დაწერთ მარტივ ბაზის სტილებს მცირე ეკრანებისთვის, შემდეგ ეტაპობრივად დაამატებთ სირთულის მცირე რაოდენობას უფრო დიდი. ეს მიმართულება მოიტანს უფრო სუფთა, უფრო მსუბუქ CSS-ს და შეესაბამება იმას, თუ როგორ ხდება კონტენტის ხელახალი განლაგება.

## სხვა სასარგებო მოთხოვნები

```css
@media (max-width: 600px) { }                 /* small screens */
@media (orientation: landscape) { }            /* device orientation */
@media (prefers-color-scheme: dark) { }        /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { }    /* user dislikes animation — accessibility */
@media print { }                                /* print stylesheet */
```

`prefers-reduced-motion` და `prefers-color-scheme` რეაგირებენ მომხმარებლის *პარამეტრებზე*, არა ეკრანის ზომაზე — მნიშვნელოვანი ხელმისაწვდომობის და თემის জთვის.

## პირობების გაერთიანება

```css
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
```

## შენიშვნა ხელმისაწვდომობის მომავლიდან: კონტეინერული მოთხოვნები

მედია მოთხოვნები რეაგირებენ **viewport**-ზე; უფრო ახალი **კონტეინერული მოთხოვნები** (`@container`) რეაგირებენ *მშობელი ელემენტის* ზომაზე — უფრო ভাল სულ რეუზირებელი კომპონენტებისთვის. ისინი ავსებენ მედია მოთხოვნებს და არა ამტკიცებენ მათ.

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

მედია მოთხოვნები არის რესპონსიული დიზაინის საფუძველი — განლაგების, სპaced-ის და სვეტების შეცვლა ეკრანის ზომის მიხედვით.

მობილური-პირველი `min-width` მეთოდი აქცევს CSS-ს მართვადს, ხოლო პარამეტრის მოთხოვნები (`prefers-reduced-motion`, `prefers-color-scheme`) აღართობენ რესპონსიულობას ხელმისაწვდომობისა და თემაზე.