Почему адаптация под мобильное не получается?
Выполняю учебное задание. Подскажите, пожалуйста, почему в этом примере не работает media?
snippet
Дополнительно:
Начните с придумывания того как оно должно выглядеть на мобилках.
Сейчас у вас контейнер имеет фиксированную ширину 1000px. Наверное, при уменьшении экрана и он должен уменьшаться. Т.е. это не width, а max-width.
Зачем-то вы ставите его в центр абсолютом. Зачем? Есть флексы и гриды.
И так далее и решаете с каждым из блоков.
Хорошо бы почитать про семантику. Для текстов использовать заголовки и параграфы, а для ссылок теги <a>, а не <button>
Почему адаптация под мобильное не получается?
Получается. Через инспектор кода браузера видно, что @ media выполняются.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы успешно адаптировать веб-сайт под мобильные устройства, есть несколько ключевых моментов, которые следует учитывать:
1. Responsive Design: Убедитесь, что ваш сайт использует адаптивный дизайн, который позволяет контенту гибко изменяться в зависимости от размера экрана устройства. Для этого используйте медиа-запросы в CSS, чтобы оптимизировать отображение контента на разных устройствах.
@media screen and (max-width: 768px) { /* стили для мобильных устройств */ }
2. Touch Friendly: Убедитесь, что элементы на вашем сайте легко нажимаются пальцем на сенсорных устройствах. Увеличьте размер кнопок и ссылок, чтобы упростить навигацию на мобильных устройствах.
3. Изображения: Оптимизируйте изображения для мобильных устройств, чтобы ускорить загрузку страниц. Используйте форматы изображений с меньшим размером файла, такие как WebP, и укажите размеры изображений через атрибуты width и height.
4. Мобильный UX: Убедитесь, что пользователи могут легко находить нужную информацию на вашем сайте. Оптимизируйте структуру сайта, упростите навигацию и уберите излишние элементы, которые могут мешать на мобильных устройствах.
5. Тестирование: Не забывайте тестировать адаптацию под мобильные устройства на реальных устройствах, а не только на эмуляторах. Просмотрите сайт на различных устройствах с разными размерами экрана, чтобы убедиться, что все элементы отображаются корректно.
Следуя этим рекомендациям и уделая внимание каждому из аспектов адаптации под мобильные устройства, вы сможете значительно улучшить пользовательский опыт и сделать ваш сайт более доступным для всех пользователей, включая тех, кто заходит с мобильных устройств.