Почему не работает media запрос?

Question

[Kakosik]

Почему не работает медиа запрос?

@media (min-width:534px) and (max-width:768px){
    .video{
    width: 90%;
}
    .vid{
    width: 90%;
}  
}

Answer 1

[Илья Матвийчук]

Включение поддержки тега meta viewport для адаптивных сайтов осуществляется посредством добавления всего одной строчки в раздел head веб-страницы:

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

Атрибут name предназначен для того чтобы указать браузеру, какую именно информацию о странице хотим ему сообщить. В данном случае эта информация касается viewport.

Контент (содержимое) этих сведений указывается в качестве значения атрибута content посредством пар ключ-значение, разделённых между собой запятыми.

Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами:

width=device-widthinitial-scale=1

Если же необходимо фиксированный сайт отобразить в браузере мобильного устройства в обычном масштабе (не уменьшенном), то необходимо использовать следующий вид метатега viewport:

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

статья

Comments

[Kakosik]

Спасибо большое!!! Я самоучка и уже три дня ищу информацию по данному вопросу и ее нигде нет.

[Илья Матвийчук]

Kakosik, понимаю, сам на этом застрявал. Удачи в учёбе.

[Илья Матвийчук]

Kakosik, не забудь ответ правильным отметить
----
Апд: спасибо, модерация