Не пойму как работает min-width

[Alfa2015]

Здравствуйте! 

Не пойму как работает min-width  в медиа запросах.

 

Вот, например, мне нужно, чтобы на больших экранах был фон у блока с картинкой, а на маленьких экранах -- картинку убрать.

То есть, на экранах с минимальной шириной 768px картинка с фоном должна исчезнуть...но она не исчезает. 

 

Пишу такой код:

@media (min-width: 1200px) {.footer {	background: url(../images/1.png) no-repeat;}}@media (min-width: 992px) {.footer {	background: url(../images/1.png) no-repeat;}}@media (min-width: 768px) {.footer {	background:none;}}

[satantx]

max-width же, не?

[li4e]

Попробуйте так 

.footer {    background: url(../images/1.png) no-repeat;}@media all and (max-width: 768px) {.footer {	background:none;}}

Edited October 6, 2015 by li4e

[hypnocolor]

min-width — минимальная ширина, при которой будет выполняться всё, что внутри этого медиа-запроса. То есть, для  @media (min-width: 1200px) нужно, чтобы размер вьюпорта был минимум 1200 точек, если он меньше — условия запроса не выполняются.

 

max-width — соответственно, максимальная ширина с тем же принципом.

Edited October 6, 2015 by hypnocolor