# Введение в медиазапросы в CSS

Существует специальная команда `@media`, которая позволяет выполнять различный код в зависимости от ширины экрана.

В следующем примере некоторый код сработает, если ширина экрана от `300px` до `1200px`:

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

В следующем примере некоторый код сработает, если ширина экрана больше `300px`:

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

В следующем примере некоторый код сработает, если ширина экрана меньше `1200px`:

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

Давайте напишем в нашем медиа запросе какой-нибудь код. Например, при определенных размерах экрана покрасим абзацы в красный цвет:

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

А теперь покрасим абзацы в различные цвета в зависимости от ширины экрана:

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

Пусть следующий код применится на экране шириной от `0` до `800px`:

`p { font-size: 20px; }`

А следующий код пусть применится на экране шириной от `800px` и больше:

`p { font-size: 30px; }`

Пусть следующий код применится на экране шириной от `0` до `500px`:

`p { font-size: 15px; }`

Следующий код пусть применится на экране шириной от `500px` до `900px`:

`p { font-size: 20px; }`

Следующий код пусть применится на экране шириной от `900px` и больше:

`p { font-size: 30px; }`
← →
↑