Как правильно формировать media-запрос?

Question

[Сергей Шилов]

Задача - сделать определенный элемент адаптивным по размеру, в зависимости от экрана., в данном случае это video в html5. Для большого экрана я делаю следующее:

@media screen and (max-width: 1024px) {
	video {width: 1024px;}
} /*В данном случае мы говорим, что если ты экран и у тебя максимальная ширина 1024px, то video принимает ширину 1024px*/

@media screen and (max-width: 1900px) {
	video {width: 1900px;}
}/*В данном случае мы говорим, что если ты экран и у тебя максимальная ширина 1900px, то video принимает ширину 1900px*/

Вроде все правильно, но когда я открываю это на мониторе с разрешением 1280px, то мы видим такую штуку:

В данном случае монитор 1280х1024, но он почему-то перечеркивает указанный для его ширины медиа-запрос и устанавливает все равно больший запрос.
Что я делаю не так?

Answer 1

[Алексей Афанасьев]

Попробуйте написать media-запросы от большего к меньшему

Comments

[Сергей Шилов]

То есть просто поменять местами запросы?

[Алексей Афанасьев]

да

[Сергей Шилов]

Сработало, благодарю!

Answer 2

[Иван Желудков]

По моему стоит сделать min-width, а не max-width, чтобы система работала так, как вы хотите.

Comments

[Иван Желудков]

То есть видео будет 1024 в ширину, только у тех, у кого экран меньше, чем 1024px. Соответственно min-width это должен исправить. Возможно я ошибаюсь.

[Сергей Шилов]

Нет, это не совсем то, min-width стоит делать, если вы в принципе ведете расчет от какого-то конкретно разрешения, а при адаптивном дизайне стоит использовать max-width