Почему не срабатывает медизапрос?
Есть два медиа запроса:
@media screen and (max-width: 1199px) { .header { display: none; } .mainText, .button { font-size: 45px; } .secondText { font-size: 30px; } } @media screen and (max-width: 479px) { .mainText, .button { font-size: 90px; } .secondText { font-size: 40px; } } |
@media screen and (max-width: 1199px) { .header { display: none; } .mainText, .button { font-size: 45px; } .secondText { font-size: 30px; } } @media screen and (max-width: 479px) { .mainText, .button { font-size: 90px; } .secondText { font-size: 40px; } }
С первым все прекрасно, когда в инструментах разработчика включаю режим просмотра на разных устройствах, то на каком нибудь ipad air медизапрос срабатывает (скрин 1), но если я переключаюсь на, например, samsung s20 (скрин 2), то второй медиазапрос не срабатывает, хотя ширина экрана 412 пикселей.Причем если выключить этот режим просмотра и просто сжать экран до 479 пикселей и меньше, то все прекрасно работает (скрин 3).Как это вообще понимать?
Дополнительно:
https://yandex.ru/search/?text=meta+viewport
- Спасибо
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы разобраться, почему не срабатывает медиазапрос, нужно убедиться, что все параметры заданы правильно. Вот несколько шагов, которые можно предпринять, чтобы исправить проблему:
1. Проверьте правильность написания медиазапроса. Убедитесь, что селекторы и условия указаны без ошибок. Например, если вы хотите применить стили для экранов шириной менее 768 пикселей, то медиазапрос должен выглядеть примерно так:
@media screen and (max-width: 768px) { ... }
2. Убедитесь, что медиазапрос находится в правильном месте в вашем CSS файле. Медиазапросы должны идти после основных стилей для того, чтобы правильно переопределять их на определенных устройствах.
3. Проверьте, не перекрывают ли другие стили ваш медиазапрос. Иногда более конкретные стили могут переопределить правила из медиазапроса.
4. Убедитесь, что ваш HTML код правильно связан с CSS файлом, где находится медиазапрос. Проверьте пути к файлам и наличие опечаток.
5. Проверьте поддержку вашего медиазапроса в различных браузерах. Иногда некоторые стили могут не работать из-за несовместимости с определенным браузером.
Если после выполнения этих шагов проблема не решена, попробуйте упростить медиазапрос и посмотреть, начнет ли он срабатывать. Также можно использовать инструменты разработчика в браузере для отладки CSS и проверки, какие стили применяются к элементам на разных устройствах.