Πώς τα media queries ενεργοποιούν το αποκρινόμενο σχέδιο;

Question

Accepted Answer

Τα **media queries** εφαρμόζουν CSS υπό όρους με βάση τα χαρακτηριστικά της συσκευής — συνήθως το **πλάτος viewport** — επιτρέποντας σε ένα φύλλο στυλ να προσαρμοστεί σε τηλέφωνα, tablets και επιτραπέζιους υπολογιστές.

```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; }
}
```

## Mobile-first (min-width) έναντι desktop-first (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) { ... }
```

Το **Mobile-first** (`min-width`) είναι γενικά προτιμώμενο: γράφετε απλά βασικά στυλ για μικρές οθόνες, και στη συνέχεια προσθέτετε σταδιακά πολυπλοκότητα για μεγαλύτερες. Αυτό τείνει να παράγει πιο καθαρό, ελαφρύτερο CSS και ταιριάζει με τον τρόπο που αναδιατάσσεται το περιεχόμενο.

## Άλλα χρήσιμα queries

```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` ανταποκρίνονται στις *προτιμήσεις* του χρήστη, όχι στο μέγεθος της οθόνης — σημαντικό για την προσβασιμότητα και το theming.

## Συνδυασμός συνθηκών

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

## Μια σημείωση για το μέλλον: container queries

Τα media queries ανταποκρίνονται στο **viewport**; τα νεότερα **container queries** (`@container`) ανταποκρίνονται στο *μέγεθος ενός στοιχείου γονέα* — καλύτερο για πραγματικά επαναχρησιμοποιήσιμα στοιχεία. Συμπληρώνουν αντί να αντικαθιστούν τα media queries.

## Γιατί είναι σημαντικό

Τα media queries είναι το θεμέλιο του αποκρινόμενου σχεδίου — προσαρμογή διάταξης, απόστασης και στηλών στο μέγεθος της οθόνης.

Η προσέγγιση Mobile-first `min-width` διατηρεί το CSS διαχειρίσιμο, και τα queries προτιμήσεων (`prefers-reduced-motion`, `prefers-color-scheme`) επεκτείνουν την ανταπόκριση στην προσβασιμότητα και το theming.