Как создать адаптивный сайт для всех устройств?

Дата публикации: 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 сбросить размер шрифта:

адаптивный сайт 

После этого можно определить размер адаптивного шрифта, как показано ниже:

адаптивный сайт

Новости по теме

Оставить комментарий