Почему только один из моих медиа-запросов не работает?

Question

Я использую несколько медиа-запросов для веб-сайта, и самая большая (min-width: 1201px) - единственная, которая не выполняет никаких изменений. Вот те запросы, которые я использовал, набравшие точно, как показано в моем CSS, и именно в таком порядке:

@media only screen and (min-width: 320px) {} 

@media only screen and (min-width:480px) {} 

@media only screen (min-width: 768px) and (max-width: 991px) {} 

@media only screen (min-width: 992px) and (max-width: 1200px) {} 

@media screen (min-width: 1201px) {} 

я включил мета-тег в главе index.html:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Еще одна вещь, которую я нашел нечетной, находится в index.html. Я применил мультимедийные запросы с изображениями различного размера для фона обложки фона и тот, который я использовал там с минимальной шириной: 1200 работал.

Я действительно надеюсь, что один из вас может определить, что мне не хватает.

Answer 1

Не все эти запросы работают. Я думаю, что это то, что вам нужно.

@media only screen and (min-width: 320px) and (max-width: 479px) {} 
@media only screen and (min-width:480px) and (max-width: 767px) {} 
@media only screen and (min-width: 768px) and (max-width: 991px) {} 
@media only screen and (min-width: 992px) and (max-width: 1200px) {} 
@media screen and (min-width: 1201px) {} 

увидеть его в действии здесь: https://jsfiddle.net/e7wdmca4/1/

Answer 2

Вы пропускаете "и" в последнем запросе: @media экран и (мин-ширина: 1201px) {}