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

Прохожу урок по адаптивной верстке. Там используется @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%;
}
}

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

media

@media

адаптивность

адаптивная верстка

3 ответов

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

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

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

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