Τι πρέπει να οριστεί στο CSS για τη ρύθμιση και την εφαρμογή αυτών των σημείων διακοπής;

Χρησιμοποιείται η ερώτηση media @media. Μέσα σε αυτήν, ορίζονται συνθήκες για την εφαρμογή στυλ, βασισμένες στα χαρακτηριστικά της συσκευής ή της περιοχής προβολής.

Βασικές παράμετροι των ερωτήσεων 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: Ορίζονται πρώτα τα στυλ για τις μικρότερες οθόνες, και στη συνέχεια προστίθενται ερωτήσεις media με min-width για μεγαλύτερες οθόνες.
2. Desktop First: Ορίζονται πρώτα τα στυλ για τις μεγάλες οθόνες, και στη συνέχεια προστίθενται ερωτήσεις media με max-width για μικρότερες οθόνες.

Η επιλογή εξαρτάται από το έργο και τις προτιμήσεις.

Τυπικές τιμές σημείων διακοπής:

Συσκευή	Εύρος πλάτους	Ερώτηση media (Mobile First)	Ερώτηση media (Desktop First)
Μικρά τηλέφωνα	< 576px	Δεν υπάρχει (βασικά στυλ)	@media (max-width: 575.98px)
Τηλέφωνα	>= 576px	@media (min-width: 576px)	@media (max-width: 767.98px)
Tablets	>= 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)	Δεν υπάρχει (βασικά στυλ)

Είναι σημαντικό να επιλέγετε τα σημεία διακοπής βάσει του περιεχομένου και του σχεδίου, όχι μόνο των προδιαγραφών συσκευών. Πρέπει να ενεργοποιούνται εκεί που το σχέδιο αρχίζει να 'σπάει'.