Εισαγωγή στα Media Queries στο CSS

Υπάρχει μια ειδική εντολή @media, η οποία επιτρέπει την εκτέλεση διαφορετικού κώδικα ανάλογα με το πλάτος της οθόνης.

Στο επόμενο παράδειγμα, κάποιος κώδικας θα εκτελεστεί αν το πλάτος της οθόνης είναι από 300px έως 1200px:

css@media (min-width: 300px) and (max-width: 1200px) {
  /* some code */
}

Στο επόμενο παράδειγμα, κάποιος κώδικας θα εκτελεστεί αν το πλάτος της οθόνης είναι μεγαλύτερο από 300px:

css@media (min-width: 300px) {
  /* some code */
}

Στο επόμενο παράδειγμα, κάποιος κώδικας θα εκτελεστεί αν το πλάτος της οθόνης είναι μικρότερο από 1200px:

css@media (max-width: 1200px) {
  /* some code */
}

Ας γράψουμε στον media query μας κάποιον κώδικα. Για παράδειγμα, για συγκεκριμένα μεγέθη οθόνης, θα βάψουμε τις παραγράφους με κόκκινο χρώμα:

css@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

Τώρα ας βάψουμε τις παραγράφους με διαφορετικά χρώματα ανάλογα με το πλάτος της οθόνης:

css@media (max-width: 300px) {
  p {
    color: red;
  }
}
@media (min-width: 300px) and (max-width: 900px) {
  p {
    color: green;
  }
}
@media (min-width: 900px) and (max-width: 1200px) {
  p {
    color: blue;
  }
}
@media (min-width: 1200px) {
  p {
    color: orange;
  }
}

Задание 1

Αφήστε τον ακόλουθο κώδικα να εφαρμοστεί σε οθόνη με πλάτος από 0 έως 800px:

cssp {
  font-size: 20px;
}

Και ο ακόλουθος κώδικας ας εφαρμοστεί σε οθόνη με πλάτος 800px και περισσότερο:

cssp {
  font-size: 30px;
}

Задание 2

Αφήστε τον ακόλουθο κώδικα να εφαρμοστεί σε οθόνη με πλάτος από 0 έως 500px:

cssp {
  font-size: 15px;
}

Ο ακόλουθος κώδικας ας εφαρμοστεί σε οθόνη με πλάτος από 500px έως 900px:

cssp {
  font-size: 20px;
}

Ο ακόλουθος κώδικας ας εφαρμοστεί σε οθόνη με πλάτος 900px και περισσότερο:

cssp {
  font-size: 30px;
}