CSS @media определение размера экрана?

Question

[Berkutman]

Всем привет имеется следующий css код на media запросы, дело в том что работает media 320 px , не важно на каком разрешении экрана, другие функции media не включаются при изменения разрешения экрана браузера.

.headerbk{
     
/* Фоновое изображение выровнено по центру в горизонтальной и вертикальной плоскостях */   background-position: center center;      
/* Фон не повторяется */   background-repeat: no-repeat;      
/* Фон зафиксирован в области просмотра и потому не двигается, когда высота контента превышает высоту изображения */   background-attachment: fixed;      
/* Это свойство заставляет фон менять масштаб при изменении размеров содержащего его контейнера*/   background-size: cover; 
    padding-top: calc(6rem + 106px);
    padding-bottom: 30rem;     
}

@media (min-width: 1200px) {   
.headerbk {     
background-image:url(../img/1.jpg);    } 
}	

@media (min-width: 992px) and (max-width: 1199px) {   
.headerbk {     
background-image:url(../img/1.jpg);    } 
}

@media (min-width: 768px) and (max-width: 991px) {   
.headerbk {     
background-image:url(../img/gv.png);     } 
}

@media (min-width: 480px) {   
.headerbk {     
background-image:url(../img/gv.png);     } 
}

@media (max-width: 767px) {   
.headerbk {     
background-image:url(../img/gv.png);     } 
}

Answer 1

[Алексей Уколов]

Под правило min-width: 320px попадают все вышеперечисленные разрешения, а поскольку оно указано последним, то и применяется именно его стили.
Вам нужно поменять порядок на обратный - от меньшей ширины к большей.

Comments

[Berkutman]

Спасибо :D

[Berkutman]

Думаю мне нужно будет ещё почитать литературу.