|
Вы здесь: Главная → Сборник статей → Адаптация под мобильные устройства |
Перечень статей раздела Адаптация под мобильные:
Подготавливаем сайт к адаптации под мобильные устройства
- Как имитировать просмотр сайта с мобильного устройства на обычном компьютере
- Составляем адаптивный макет (прототип)
- Определяем контрольные точки в медиа-запросах
- Определяем способ адаптация
- Изменяем масштабирование веб-страниц
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
Для того, чтобы выполнить адаптивный дизайн, т.е. адаптировать сайт под мобильные устройства, необходимо выполнить ряд определенных действий, таких как, разработка адаптивного макета, определение способа адаптации и контрольных точек, изменение масштабирования веб-страниц, формирование медиа-запросов с назначением стилей CSS для разных разрешений экранов, создание выпадающих меню.
Понятие адаптивный дизайн следует рассматривать более широко, чем адаптивный макет, так как оно охватывает весь комплекс, включая и разработку адаптивного макета и выбор и реализацию технических решений по адаптации сайта.
В связи с тем, что объем данного материала не позволяет рассмотреть его одной статье, эта тема разбита на 3 части:
- Подготовка сайта к адаптации под мобильные устройства.
- Формирование медиа-запросов для разных разрешений экранов.
- Создание выпадающего меню для работы с малым разрешением экранов (смартфоны).
В итоге мы должны получить сайт, который будет хорошо управляться и просматриваться на всю ширину экранов на любых устройствах в диапазоне разрешений от 320 до 1920 пикселей.
А сегодня мы рассмотрим первую часть, в которой в основном будут включены вопросы по подготовке к непосредственному выполнению адаптации.
Формируем медиа-запросы для разных разрешений экранов
- Принцип описания медиа-запросов методом Cначала мобильные
- Формируем медиа-запросы для минимального разрешения
- Назначаем стилевые свойства для разных разрешений в установленном диапазоне
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
Сегодня сформируем медиа-запросы с помощью правил CSS и адаптируем наш сайт под мобильные устройства. При этом сделаем так, чтобы сайт хорошо отображался на всех устройствах в установленном диапазоне от 320 до 1920 пикселей.
Для определения параметров устройств применяются специальные медиа-запросы. С их помощью браузер узнает какое устройство используется при загрузке веб-страницы, и исходя из этого применяются те или иные стилевые свойства.
Таким образом можно подстраивать отображение страниц сайта под разрешение монитора персонального компьютера или дисплея мобильного устройства меняя при необходимости размер изображений и текста, ширину страниц и компоновку их элементов.
Все медиа-запросы обозначаются правилом "@media", после чего следуют условия, при выполнении которых используются назначенные свойства стилей CSS...
Создаем выпадающее меню под мобильные устройства
- Добавляем в разметку элементы дополнительной кнопки для вызова меню
- Оформляем с помощью стилей CSS внешний вид выпадающего меню
- Составляем скрипт для управления выпадающим меню
- Создаем дополнительный элемент навигации Хлебные крошки
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
Сегодня для управления сайта при использовании мобильными устройствами рассмотрим весьма немаловажный вопрос о том, как создать выпадающее меню, необходимое для работы с небольшим разрешением экранов. Также дополним веб-страницы элементом навигации "Хлебные крошки", в котором будет отображаться информация о текущих страницах сайта.
В предыдущей статье, при адаптации сайта под мобильные устройства на экранах с небольшим разрешением от 320 до 600 пикселей с помощью свойств CSS мы скрыли Главное меню. Это необходимо было сделать, так как такой размер экрана не позволяет отображать меню на всю ширину страницы.
Для того, чтобы вызывать скрытое меню, а также, чтобы иметь возможность его сворачивать, требуется соответствующий элемент управления. В качестве такого элемента согласно адаптивного макета, составленного в статье Подготавливаем сайт к адаптации под мобильные устройства была предусмотрена кнопка, размещаемая в правом верхнем углу шапки сайта.
Сейчас мы добавим необходимые элементы кнопки в разметку HTML-страниц, а дальше с помощью стилей CSS определим ее местоположение и сформируем внешний вид...