Не работают @media теги в 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). Еще исходный код стоит скачивать, если что-то не получается и его запускать, потом сравнивать со своим кодом.
viewport есть в html странице. Это я проверил в первую очередь. Касательно браузера: и сбрасывал кеш, и обновлял через ctrl + f5, я даже полностью переустановил Хром. Ну а теперь самое не объяснимое - исходный код работает!!! Я сначала запустил отдельно его работает. Потом, закомментировал все свои CSS стили и скопировал туда стили из исходника. И все заработало! Дальше я удалил все стили из media оставив такую запись:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
.header {
background-color: #257965;
}
}
И она тоже работает!!! Я сравнил ВСЕ! Ни одной ошибки, ни одной разбежности! Все как в курсах. Но в исходнике эта запись работает, а точно такая же но написанная мной - нет!