Не состыковка с @media-запросами?

Question

[Denis]

Добрый вечер!
Не могу понять в чём дело, либо уже совсем выжил из ума!
На главной страничке есть header(Высота:580px), при размерах экрана 1200px+ высота должна увеличиваться допустим до 1000px, а при меньшем размере оставаться такой же, у меня что-то плохо с media-запросами, это правильно(ниже код)?

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
min-height: 581px;
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
min-height: 1000px;
}

Comments

[Сергей delphinpro]

.header {
  height: 580px;
}

@media (min-width: 1200px) {
  .header {
    height: 1000px;
  }
}

Answer 1

[Анатолий]

Укажите, для чего изменяете стили.
Например,

@media only screen and (min-width : 1200px) {
    header {
        min-height: 1000px;
    }
}

Comments

[Denis]

Спасибо за ответ!
Вот наглядный пример, высота в 1000px получается на всех разрешениях, а в 581px не работает, в чём может быть дело? Почему не работает?

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	.item-slider-header {
		min-height: 581px;
	}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	.item-slider-header {
		min-height: 1081px;
	}
}

[Анатолий]

Denis, Потому что у вас второй media перекрывает первый. Вообще лучше верстать (тогда не возникает проблем с перекрытием стилей) от большого к маленькому.

/* Самые большие девайсы >1200px */
@media only screen and (min-width: 1200px) {
    /* styles */
}

/* Средние девайсы <1200 px */
@media only screen and (max-width : 1200px) {
    /* styles */
}

/* Карманные девайсы <700 px */
@media only screen and (max-width : 700px) {
    /* styles */
}

min-width указывает на то, что стили будут применяться для экранов с этим разрешением и больше, в то время как стили в max-width будут применяться для экранов с этим разрешением и меньше. Лично я верстаю только с max-width и проблем с тем, что стили друг другу противоречат очень мало.

P.S.: Если ответ помог, отметьте его решением :)

[Denis]

Анатолий, Да, спасибо! Всё понятно объяснили:)