Introducere în media queries în CSS

Există o comandă specială @media, care permite executarea unui cod diferit în funcție de lățimea ecranului.

În următorul exemplu, un anumit cod se va executa dacă lățimea ecranului este de la 300px până la 1200px:

css@media (min-width: 300px) and (max-width: 1200px) {
  /* un anumit cod */
}

În următorul exemplu, un anumit cod se va executa dacă lățimea ecranului este mai mare de 300px:

css@media (min-width: 300px) {
  /* un anumit cod */
}

În următorul exemplu, un anumit cod se va executa dacă lățimea ecranului este mai mică de 1200px:

css@media (max-width: 1200px) {
  /* un anumit cod */
}

Să scriem în media query-ul nostru ceva cod. De exemplu, pentru anumite dimensiuni ale ecranului, să colorăm paragrafele în roșu:

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

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

Acum să colorăm paragrafele în diferite culori în funcție de lățimea ecranului:

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

Fie că următorul cod se aplică pe un ecran cu lățimea de la 0 până la 800px:

cssp {
  font-size: 20px;
}

Iar următorul cod să se aplice pe un ecran cu lățimea de la 800px și mai mult:

cssp {
  font-size: 30px;
}

Задание 2

Fie că următorul cod se aplică pe un ecran cu lățimea de la 0 până la 500px:

cssp {
  font-size: 15px;
}

Următorul cod să se aplice pe un ecran cu lățimea de la 500px până la 900px:

cssp {
  font-size: 20px;
}

Următorul cod să se aplice pe un ecran cu lățimea de la 900px și mai mult:

cssp {
  font-size: 30px;
}