Давайте начнем изучение медиа-запросов с самых основ, с основных правил, как пишутся медиа-запросы CSS, какой синтаксис при этом используется. Ничего сложного в этом нет.

Чтобы создать медиа-запрос, мы должны создать вот такую конструкцию:

@media условия {
…
Стили CSS
…
}

@media - оператор, который означает то, что сейчас будет прописываться медиа-запрос.

условия - указывается либо одно условие, которое будет определять какое-то конкретное медиа-устройство, к которому будут относиться правила стилей CSS ниже, либо какой-то набор условий. 

Эти условия будут конкретно определять какой-то вид или тип медиа-устройств, к которым будут относиться правила и далее в фигурных скобках, прописываются те стили CSS, которые должны применяться к тем устройствам, которые подходят под набор условия, которое указано в медиа-запросе.

Если условий в медиа-запросе несколько, то разделителем между ними должен быть какой-то определенный оператор.

Условие 1 <Оператор> Условие 2 …

Этот набор условий конкретно определяет те медиа-устройства, к которым будут относиться правила.

Вот такой синтаксис, пока может быть несколько непонятно, но на практике мы все разберем и посмотрим.