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