Сегодня мобильная версия сайта не просто дополнительный бонус для посетителей, использующих телефоны, а первоочередная функция вашей верстки. Поэтому современные сайты, выполненные по индивидуальному заказу или даже на базе готовых шаблонов, по умолчанию изначально уже имеют мобильную версию. Но что делать если сайт создан в эпоху, когда самой современной моделью был Nokia 3310? Об этом и пойдет речь в нашей статье.
В первую очередь нужно определиться с требованиями.
Самый быстрый и простой способ создания мобильной верстки – это использование так называемых CSS-фреймворков (по-русски библиотек). Они содержат набор готовых правил для управления отображением страницы в зависимости от размеров экрана. В основе таких фреймворков лежит размерная сетка.
Телефоны | Планшеты | Ноутбук | Десктоп | |
---|---|---|---|---|
Размер экрана: | <768px | ≥768px | ≥992px | ≥1200px |
Наиболее популярные среди CSS-фреймворков являются: Foundation, Bootstrap. Для работы над нашим примером был выбран Bootstrap.
Материалов по требованиям к макетам при подготовке их к верстке хватит на несколько отдельных статей, поэтому рассмотрим их лишь основные.
Результат работы вы можете наблюдать на сайте-примере. Вот так просто можно сделать адаптивную версию верстки практически любого сайта. Для качественного сравнения рекомендуем использовать инструмент от Google – PageSpeed Insights. В нашем случае правки позволили повысить оценку с 40 баллов до 85.
Мы используем файлы cookie для улучшения работы нашего сайта и предоставлении вам наиболее полезного контента.
Спасибо за заявку!
Наш менеджер свяжется с вами в ближайшее время.