Почему не работают media запросы при сжимании окна браузера?

Question

[Евгений Холодов]

Добрый день! Подскажите пожалуйста, почему не работают media запросы при сжимании окна браузера ниже 992px? То есть, последний запрос который переопределяет стили это 992, запросы которые ниже, даже не отображаются в инспекторе объектов. При этом, если пользоваться встроенным инстументом в google chrome для изменения размера экрана, то стили применяются хорошо. Посмотрите и подскажите пожалуйста? Так же есть проблема при открытии сайта на смартфоне. Не применяются стили...

bliki.kz

Answer 1

[Егор Живагин]

Вы реально окошко сжимаете?) Пользуйтесь devTools и не мучайтесь, всё нормально у вас

На телефоне сбросили кэш? У меня порядок

Comments

[Евгений Холодов]

Кеш чистил на телефоне. Все равно работает не корректно. Сможете скинуть скриншот на телефоне как у вас отображается? На мобильной версии не должно быть меню вообще.

[Евгений Холодов]

А так же, на странице advance-plus.kz/bliki.kz/o-fotostudii.html как я уже писать не применяются стили ниже 992Px

[Егор Живагин]

Евгений Холодов: сейчас скину
По ссылке - стили для media ... 480px применились у меня.

[Евгений Холодов]

Егор Живагин: Очень странно, ладно буду разбираться со своим устройством. А подскажите еще, есть ли где то эмулятор разных телефонов? Чем больше тем лучше и желательно не просто размером экрана?

[Егор Живагин]

Самый удобный эмулятор - в том же devTools, если возле размеров экрана нажать на Responsive и выбрать Edit . Другие эмуляторы, уверен, можно найти в Гугле. Хотя с эмуляторами iphone сложнее, они обычно не бесплатные

[Евгений Холодов]

Егор Живагин: Хорошо, я понял.
Еще вопрос есть, если я верстаю на разрешение допустим max 768px и следующий после него идет max 480px, как сделать чтобы в этом промежутке отображалось все нормально? Неужели нужно прописывать стили на каждый пиксель?)

[Егор Живагин]

Евгений Холодов: тут только общий ответ - меньше фиксированных размеров, больше резины.
И адекватный метод: Например, выбрали диапазон 768-480px . И сразу в браузере выставляете 480px ширину, делаете так, чтоб на ней элементы отображались хорошо. То есть сразу переходите к минимальному разрешению на выбранном промежутке.

Ну и для адаптива есть много интересного, от сетки bootstrap до флексбоксов

[Евгений Холодов]

Егор Живагин: Стараюсь делать минимум фиксированных размеров, но видите какой дизайн нужен, эти все полосы и кривые блоки, приходится делать абсолютное позиционирование. Другого метода, кроме как выставление размеров в пикселях не нахожу(

Answer 2

[Павел]

А почему у Вас:
@media only screen and (max-width : 768px) {
Должно быть просто:
@media (max-width: 768px)
Или:
@media screen and

Полагаю в этом дело
htmlbook.ru/css/value/media