Πώς λειτουργούν τα media queries στην ανάπτυξη ιστοσελίδων για ευέλικτο σχεδιασμό, συμπεριλαμβανομένων των κινητών συσκευών;

Οι ερωτήσεις media επιτρέπουν την εφαρμογή συγκεκριμένων στυλ CSS ανάλογα με τα χαρακτηριστικά της συσκευής ή της περιοχής προβολής. Χρησιμοποιούνται για τη δημιουργία ενός ευέλικτου σχεδιασμού που εμφανίζεται σωστά σε διάφορες οθόνες, συμπεριλαμβανομένων κινητών συσκευών, tablets και επιτραπέζιων υπολογιστών.

Η κύρια σύνταξη της ερώτησης media:

@media <τύπος_μέσου> and (<έκφραση>) {
  /* κανόνες CSS */
}

• <τύπος_μέσου> καθορίζει σε ποιον τύπο συσκευής εφαρμόζεται η ερώτηση (π.χ., screen, print, all).
• <έκφραση> ορίζει τις συνθήκες υπό τις οποίες εφαρμόζονται τα στυλ (π.χ., πλάτος, ύψος, προσανατολισμός οθόνης, ανάλυση).

Δημοφιλείς εκφράσεις για ευέλικτο σχεδιασμό:

• min-width: Τα στυλ εφαρμόζονται αν το πλάτος της περιοχής προβολής είναι ίσο ή μεγαλύτερο από την καθορισμένη τιμή.
• max-width: Τα στυλ εφαρμόζονται αν το πλάτος της περιοχής προβολής είναι ίσο ή μικρότερο από την καθορισμένη τιμή.
• orientation: Τα στυλ εφαρμόζονται ανάλογα με τον προσανατολισμό της οθόνης (portrait ή landscape).
• resolution: Τα στυλ εφαρμόζονται ανάλογα με την ανάλυση της οθόνης.

Παράδειγμα χρήσης του max-width για στυλ σε κινητές συσκευές:

/* Προεπιλεγμένα στυλ */
body {
  font-size: 16px;
}

/* Στυλ για οθόνες έως 768px πλάτος (τυπικό για κινητά) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Παράδειγμα χρήσης του min-width για στυλ σε επιτραπέζιους υπολογιστές (προσέγγιση "mobile first"):

/* Προεπιλεγμένα στυλ για κινητά */
.column {
  width: 100%;
}

/* Στυλ για οθόνες από 992px πλάτος και άνω (τυπικό για επιτραπέζιους υπολογιστές) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Συνδυασμός εκφράσεων με τους τελεστές and, or (στοιχεία media query, το or γράφεται με κόμμα) και not:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Μόνο για tablets */
}

@media screen and (orientation: landscape), print {
  /* Για τοπία και εκτύπωση */
}

Το meta-tag viewport είναι σημαντικό για τη σωστή λειτουργία των ερωτήσεων media σε κινητές συσκευές:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width ορίζει το πλάτος της περιοχής προβολής ίσο με το πλάτος της συσκευής.
• initial-scale=1.0 ορίζει το αρχικό επίπεδο ζουμ.

Χωρίς αυτό το meta-tag, πολλοί κινητοί περιηγητές ζουμάρουν τη σελίδα από προεπιλογή, αγνοώντας το πραγματικό πλάτος της συσκευής, κάτι που διαταράσσει την ανταποκρισιμότητα.