Как создать адаптивный сайт для всех устройств?
Дата публикации: 30 марта 2017 года в 18:36.
Категория: Общество.
Сделать адаптивный сайт можно в три простых этапа.
Этап 1. Схема
Когда создаешь адаптивный веб-сайт, первый элемент, который нужно смотреть - макет. Когда <a href="https://www.templatemonster.com/ru/" target="_blank">создаете сайты</a>, всегда начинайте с создания неадаптивного макета, фиксированного по умолчанию на определенный размер. Например, CatsWhoCode.com имеет по умолчанию ширину -1100px. Когда работа над неадаптивной версией окончена, добавляются медиа-запросы и небольшие изменения в код, чтобы заставить его реагировать.
Первое, что нужно сделать, это вставить определенные строки в <head> и </head> теги на HTML странице. Это позволит установить вид на всех экранах в пропорции 1 × 1 и удалить функцию браузеров, установленную по умолчанию в айфонах и смартфонах, отображающую сайты на весь экран. Вместо этого пользователи смогут увеличивать или уменьшать масштаб макета, сжимая его.
Как адаптировать медиа? Медиа-запросы зависят от макета веб-сайта, так что трудно предоставить готовый к использованию адаптивный шаблон. Тем не менее, приведенный ниже код является хорошей отправной точкой для большинства веб-сайтов. В этом примере, #primary - основное содержание области, и #secondary - боковая панель.
Взглянув на код, можно понять, что выделено два размера. Первый имеет максимальную ширину 1060px и оптимизирован для планшета альбомной ориентации дисплея. #primary занимает 67% от его родительского контейнера, и #secondary 30%, плюс 3% на левый край.
Второй размер предназначен для планшетов и смартфонов. Из-за небольших размеров экранов смартфонов, рекомендуется дать #primary ширину 100%. #secondary также имеют ширину 100%, и будут отображаться ниже #primary.
Как упоминалось выше, придется немного адаптировать этот код, чтобы соответствовать конкретным потребностям того или иного сайта. Вставляем его в .css файл сайта.
После этого проверяем, как реагирует на изменения в коде макет. Для этого можно использовать инструмент, созданный Мэттом Керсли http://mattkersley.com/responsive/.
Этап 1.Медиа
Далее обратим внимание на очень важный аспект современного веб-сайта – медиа: видео и изображения.
Код CSS (прописан ниже) гарантирует, что изображения никогда не будут больше, чем их родительский контейнер. Это работает для большинства веб-сайтов.
Внимание!! Максимальная ширина директивы не распознается старыми браузерами, такими как IE6. Для того чтобы работать, этот фрагмент кода должен быть вставлен в CSS.
На каждом современном сайте присутствует видео. Многие веб-ресурсы используют видео с сайтов третьих лиц, таких как YouTube или Vimeo. Сделать адаптивным встроенное видео можно по технике, предложеной Ником Ла.
HTML-код:
И теперь, CSS:
Этап 3. Типографика
В спецификации CSS3 включено новое подразделение под названием rems. Они работают практически идентично em единицы, но по отношению к HTML, его намного легче использовать, чем ems.
Поскольку rems относится к HTML элементу, нужно в HTML сбросить размер шрифта:
После этого можно определить размер адаптивного шрифта, как показано ниже:
