адаптивная верстка сайта

Адаптивная верстка сайта

Сегодня уже не для кого не секрет, что последние годы наблюдается серьезный рост мобильных посетителей в интернет. Но взаимодействие с декстопным дизайном сайта не всегда удобно, когда вы используете телефон и планшет. В связи с этим, уже давно стало стандартной практикой использование либо мобильной версии сайта, либо применение адаптивного дизайна. Более того mobile-friendly сайты лучше ранжируются при поиске с мобильных устройств, и крайне не рекомендуется терять эту адуиторию, всего лишь из-за того, что ваш сайт не адаптирован под мобильную аудиторию.

В этом посте, на практике расскажу, как происходит процесс перехода от фиксированной к адаптивной верстке.

По данным агентства GFK всего в России доступом в интернет с мобильных устройств пользуются около 50 млн. человек или 42% взрослого населения страны.

Подготовительный этап

В самом начале, чтобы пользоваться всеми возможностями CSS для адаптивной верстки в секции <head> нашего сайта нужно добавить мета-тег viewport:

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

Первый этап переводим фиксированную разметку в гибкую (резиновую)

Меняем CSS для центрального контейнера wrapper

Было:

Стало:

Далее нам нужно задать относительные величины всех дочерних элементов. В этом нам поможет формула:

цель/контекст = результат

Теперь применяем ее для всех наших блоков с заданной фиксированной шириной следующим образом, на примере левой колонки col1:

Было:

Стало:

Что изменилось: добавили свойство max-width равное текущей фиксированной ширине и поменяли значение width по нашей формуле:

цель: 618 (текущая ширина изменяемого элемента) / контекст: 940 (текущая ширина родительского элемента в данном случае wrapper) * 100 = результат: 65.74% — итоговая ширина в %.

На что хотел бы обратить внимание, что значение «контекст» будет меняться в зависимости от уровня вложенности элемента для которого считаем значение, мы не всегда берем ширину wrapper, для дочерних элементов col1 значение «контекст» в формуле уже будет равно 618.

В итоге после того как мы переведем все наши блоки в относительные величины, у нас получится следующее.

До (горизонтальная прокрутка, контент не помещается в текущую ширину браузера):

адаптивная верстка сайта

После (блоки растягиваются относительно ширины браузера, весь контент доступен без горизонтальной прокрутки):

адаптивная верстка сайта

Следующий этап проектируем макет на основе гибкой сетки (fluid grid)

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

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

адаптивная верстка сайта макет

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

Воплощаем макет в жизнь с использованием Media Queries

Media Queries это набор специальных правил используемых в CSS 3, которые помогают переопределять значения свойств любых элементов верстки в зависимости от различных параметров: разрешение устройства, ориентация экрана, тип устройства и т.д. Именно для того чтобы это правило работало, в самом начале статьи мы подключали мета тег viewport.

Чтобы начать правку макета, нам нужно определиться с так называемым break point, разрешениями экрана, при которых текущая версия макета «ломается» — контент становится трудным для восприятия.

Для удобства можно использовать типовые разрешения экранов, и проверять как выглядит макет на каждом из них:

240px, 320px, 375px, 384px, 414px, 568px, 600px, 667px, 736px, 768px, 1024px

После того как мы определись с первым break point, условно будем считать, что это 768px и применяем к нему наш макет из предыдущего шага для планшетов. CSS код будет выглядить так:

Например, с помощью такого запроса, мы можем перенести наш sidebar под блоки col1, col2 и растянуть его на всю ширину экрана.

Исходный код:

Добавляем наш media query для разрешения 768px:

По аналогии переопределяем свойства всех необходимых элементов, чтобы верстка соответствовала макету.

Делаем адаптивное меню сайта

Для начала нам нужно создать меню в обычном HTML коде, обычно это не маркированный список с ссылками:

Единственное нестандартное добавление, это ссылка с id=”pull” в дальнейшем это будет кнопка, которая показывает меню в мобильной версии адаптивной верстки.

Теперь в таблицу стилей, пропишем, все необходимое для стандартного отображения меню на сайте:

Для нашего media query с разрешением под мобильники переопределяем стили меню:

И теперь, что бы все заработало так, как нам нужно, подключим jquery скрипт, который будет сворачивать и разворачивать наше меню в мобильном варианте, подключаем нужную библиотеку:

И теперь пишем сам скрипт:

Готово! После этого работу по внедрению адаптивной верстки на сайт можно считать завершенной. Последняя рекомендация, перед тем как выкладывать переделанные файлы стилей на сайте, хорошенько протестируйте получившийся вариант, а вот что получилось у меня в итоге:

адаптивная верстка сайта макет
кликабельно

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

Забери к себе на стену:

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

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

CAPTCHA image
*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">