← Комьюнити

Не работают @media теги в css, при адаптивной верстке, в чем проблема?

Михаил2 ответов
#html#css

Добрый день! Столкнулся с очень интересной проблемой. Которую уже решил, но все же) Суть проста - не работал (и не работает) тег @media в CSS. При чем только в той конфигурации в какой он был описан в 61 уроке. С min/max-device-width. Решение вопроса нашел тут же на форуме и выглядит оно так:

@media only screen and (max-width: 568px) {
     .header {
           background-color: #257965;
     }
}

Стало интересно почему эта запись работает, а продемонстрированная в уроке нет. Прочитав несколько статей про адаптивную верстку - была обнаружена другая интересная особенность) В примере выше я указал max-width(1), но допускается и написания max-device-width(2). Разница между ними в том, что первая задает максимальную ширину окна браузера, а вторая максимальную ширину экрана устройства, без привязки к браузеру. И первая запись у меня работает, а вторая нет)) И собственно вопросы. Почему так? Это проблема эмулятора Хрома? Он не способен полностью эмулировать устройство? И все же как правильнее делать? С написанием max/min-device-width и проверять на реальном смартфоне? Или max/min-width и не парится, проверяя все в эмуляторе браузера?

2 ответов

Нужно проверить, что viewport есть в html странице. Эмуляторы в браузере часто глючат, нужно их несколько раз обновлять (лучше сбрасывая Cache у браузера обновлять через ctrl + f5). Еще исходный код стоит скачивать, если что-то не получается и его запускать, потом сравнивать со своим кодом.

student_i7JJDSFg

viewport есть в html странице. Это я проверил в первую очередь. Касательно браузера: и сбрасывал кеш, и обновлял через  ctrl + f5, я даже полностью переустановил Хром. Ну а теперь самое не объяснимое - исходный код работает!!! Я сначала запустил отдельно его работает. Потом, закомментировал все свои CSS стили и скопировал туда стили из исходника. И все заработало! Дальше я удалил все стили из media оставив такую запись:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {

       .header {
            background-color: #257965;
       }

}

И она тоже работает!!! Я сравнил ВСЕ! Ни одной ошибки, ни одной разбежности! Все как в курсах. Но в исходнике эта запись работает, а точно такая же но написанная мной - нет!

Михаил

Ваш ответ

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