Introduzione alle media query in CSS

Esiste un comando speciale @media, che permette di eseguire codice diverso a seconda della larghezza dello schermo.

Nel prossimo esempio, del codice verrà eseguito se la larghezza dello schermo è da 300px a 1200px:

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

Nel prossimo esempio, del codice verrà eseguito se la larghezza dello schermo è maggiore di 300px:

css@media (min-width: 300px) {
  /* del codice */
}

Nel prossimo esempio, del codice verrà eseguito se la larghezza dello schermo è minore di 1200px:

css@media (max-width: 1200px) {
  /* del codice */
}

Scriviamo nel nostro media query del codice. Per esempio, a determinate dimensioni dello schermo coloriamo i paragrafi in rosso:

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

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

E ora coloriamo i paragrafi in colori diversi a seconda della larghezza dello schermo:

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

Fai in modo che il seguente codice venga applicato su schermi con larghezza da 0 a 800px:

cssp {
  font-size: 20px;
}

E fai in modo che il seguente codice venga applicato su schermi con larghezza da 800px in su:

cssp {
  font-size: 30px;
}

Задание 2

Fai in modo che il seguente codice venga applicato su schermi con larghezza da 0 a 500px:

cssp {
  font-size: 15px;
}

Fai in modo che il seguente codice venga applicato su schermi con larghezza da 500px a 900px:

cssp {
  font-size: 20px;
}

Fai in modo che il seguente codice venga applicato su schermi con larghezza da 900px in su:

cssp {
  font-size: 30px;
}