Получать рассылку по электронной почте

Введите свой email-адрес:

Delivered by FeedBurner

Навигация

Об адаптивности сайтов

гибкость

Основной идеей адаптивной верстки является создание сайта, универсального для всех устройств. Для достижения этой цели используются медиазапросы.Этот новый инструмент для создания адаптивных макетов дает нам возможность настроить стили веб-страницы, в зависимости от того, какими характеристиками обладает пользовательское устройство (сюда входят ширина области просмотра, возможности устройства по отображению цветов и ориентация экрана – альбомная и портретная).
Если в CSS2.1 типы медианосителей, для которых необходимо применить стили (такие как screen – экран и print – печать) добавлялись при помощи @media, то теперь, в CSS3, по такому же принципу добавляются и медиазапросы. Только после указания типа носителя нужно задавать характеристики пользовательского дисплея (чаще всего применяются такие свойства: min-width и max-width, min-device-width и max-device-width, orientation, color ). Для этого служит слово and.
Давайте рассмотрим пример подобного медиазапроса, который размещается прямо в файле стилей. Внутри него можно записать любые правила.

В данном примере правила, находящиеся в медиазапросе выполняются когда экран больше или равен 768px. Таким же образом можно записать правила и для ситуации, когда экран меньше или равен 768px. Достаточно заменить слово min-width на max-width.
Можно указать сразу несколько характеристик в медиазапросе, например когда требутся выполнять правила для ширины экрана, в определенных пределах (от 768px до 1000px). Будет выглядеть так.

Можно в начале медиазапроса добавлять слово not, чтобы стили, содержащиеся в нем, применялись когда он не является истинным.

Обычно медиазапросы подгоняются под размеры экранов распространенных устройств – например 320×480 для телефонов, iPad portrait 768 x 1024 и т.д.
Что каксается характеристик device-width, min-device-width и max-device-width, о которых упоминалось выше, они задают не ширину области просмотра, а фактическую ширину устройства. Это менее удобно в большинстве случаев, так как устройство не всегда сообщает правильно свою ширину, хотя во многом все зависит от ситуации.

Существует также возможность задания характеристик для устройств с ретиновым дисплеем (который обладает более высоким разрешением, чем другие устройства, за счет удвоения пикселов). Для того, чтобы медиазапрос срабатывал исключительно в таких устройствах, напишите такое правило. Внутри него могут располагаться любые стили.

Когда вы разрабатываете адаптивный макет сайта, вы обязательно должны указывать тег meta, который представляет собой инструкцию мобильному устройству о том, какую оно должно отображать область просмотра.

По умолчанию в мобилках используется виртуальная область просмотра, значительно превышающая реальный размер экрана. Это сделано для того, чтобы отображать без искажений сайты не предназначенные для мобильных устройств. Поэтому, чтобы на маленьких экранах отображалась предназначенная для них версия веб-страницы, мы обозначаем, что ширина области просмотра должна быть равна фактической ширине устройства и масштаб равен 1 (без увеличения или уменьшения)

Альтернативным способом внедрения медиазапросов является использование тега <link>.

Итак, подведем итог, какое применение можно найти для медиазапросов

Инструменты для проверки отображения сайта при различных размерах экрана

Во-первых, я использую специальное расширение Responsive Web Design Tester, которое можно скачать в магазине Google и использовать для браузера Google Chrome и прочих клонов на базе Хромиума (Таких как CoolNovo, Comodo Dragon и т.п.).

tester
Расширение показывает, как будет выглядеть макет на экранах, соответствующих популярным устройствам.

Второй инструмент, который хочу вам посоветовать встроен в Firefox. Надо отдать должное, новый Firefox сделали очень удобным и он по-прежнему может составлять конкуренцию Хрому, если не по скорости, то по крайней мере по удобству инструментов для разработчика.

Откройте, какую-нибудь html-страничку в Firefox и нажмите правую кнопку мыши -пункт Исследовать элемент. Внизу страницы откроется дополнительная панель – панель разработчика. Справа вверху вы можете заметить на этой панели такой значок, при нажатии на который открывается режим адаптивного дизайна.

значок режима адаптивного дизайнаinstruments

Вы увидите, что теперь страница отображается на черном фоне, а вверху расположена панель инструментов с кнопками.

Ширину и высоту экрана с сайтом можно растягивать с помощью  мыши (зажатые клавиши Ctrl и Shift дают соответственно попиксельную точность и округление ширины десятками).

Кроме того, существует много бесплатных сервисов в Интернете, которые выполняют подобные функции. Приведу короткий список таких сервисов (на самом деле их существует великое множество, но все настолько однотипно, что не имеет смысла указывать целый десяток).

Однако не обошлось без ложки дегтя в бочке меда.
Все эти инструменты для проверки в основном просто показывают как будет выглядеть сайт при такой ширине экрана, но отнюдь не эмулируют поведение мобильных устройств.

Поэтому в теории все может быть отлично, но на практике, при просмотре с мобильного телефона такая верстка будет просто-напросто разъезжаться.
Конечно, желательно все проверять в реальных устройствах, но, наверное, охватить их все невыполнимая задача.
Бесплатных сервисов такого рода, пожалуй и не существует. Единственный реальный эмулятор, который я обнаружила, Opera Mini. Его можно скачать с сайта Opera.com по этому адресу (Opera Mobile Classic Emulator 12.1 for Windows).

Понравилась статья?
Подпишитесь на RSS по e-mail
Поделитесь в социальных сетях
Вы можете также посмотреть
Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*