Вовед во медија-записи во CSS

Постои специјална команда @media, која овозможува извршување на различен код во зависност од ширината на екранот.

Во следниот пример одреден код ќе се активира, ако ширината на екранот е од 300px до 1200px:

css@media (min-width: 300px) and (max-width: 1200px) {
  /* одреден код */
}

Во следниот пример одреден код ќе се активира, ако ширината на екранот е поголема од 300px:

css@media (min-width: 300px) {
  /* одреден код */
}

Во следниот пример одреден код ќе се активира, ако ширината на екранот е помала од 1200px:

css@media (max-width: 1200px) {
  /* одреден код */
}

Ајде да напишеме во нашиот медија-запис некаков код. На пример, при одредени димензии на екранот да ги обоим параграфите во црвена боја:

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;
}