Почему не работает @media only screen?

Федор Сотников22 марта 2019 г.3 ответов

#media #@media #адаптивность #адаптивная верстка

Прохожу урок по адаптивной верстке. Там используется @media only screen. Код написал точно также как и в уроке, но в хроме, в инструментах разработчика, при выборе мобильных девайсов ничего не работает. Пробовал оперу и мозиллу - нигде не работает

@media only screen 
and(max-device-width : 375px)
and(max-device-width : 667px) {

.header {
background-color: #fff;
min-width: 100%;
height: 20%;
text-align: center;
}

.logo {
width: 100%;
}

.site_content {
width: 100%;
}

.menubar {
width: 100%;
height: 100%;
}
}

Код выглядит вот так. Размеры экрана поставил свои. Стиль не меняет. Помогите)

3 ответов

Принятый ответ

Все. Нашел в чем проблема. После and нужно поставить пробел, чтобы было and (min-device-width : 375px)

Федор Сотников27 июня 2026 г.▲ 1

Вы задаете max-device-width два раза, что не имеет смысла :) Должно быть так:

@media only screen 
and(min-device-width : 375px)
and(max-device-width : 667px) { ... }

student_zhO6Hwd_27 июня 2026 г.▲ 2

Изменил max на min. Не помогло)
Я уже что только не пробовал. Не понимаю в чем проблема

Федор Сотников27 июня 2026 г.

Ваш ответ

Войдите, чтобы ответить