На сегодняшний день ни один уважающий себя сайт не может обойтись без такой важной вещи как «адаптация». Что же это такое? Адаптация сайта — это метод разработки дизайна страниц, при котором сайт подстраивается для понятного и внятно читаемого отображения на экранах различных устройств, таких как смартфоны, планшеты, нетбуки, ноутбуки, а так же экраны больших мониторов.

С каждым годом количество пользователей смартфонов и планшетов растет в геометрической прогрессии, так же широкое распространение получает высокоскоростной мобильный интернет – 3G и 4G сети, растет и количество мест где есть Wi-Fi доступ во всемирную паутину, а значит, что и увеличивается потребность в наличии мобильных версий ваших сайтов, а тут без вышеупомянутой адаптации не обойтись.

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

Что делать если ручная адаптация невозможна?

Но что делать если страница содержит в себе большое количество блоков и «ручная» адаптация займет огромное количество времени? Выход есть – использовать для адаптации сайтов CSS-фреймворки. Одним из наиболее популярных на сегодняшний день фреймворков является Bootstrap. Этот фреймворк был создан разработчиками Twitter и содержит множество полезных и упрощающих жизнь web-программисту вещей, но наиболее ценной для нас частью является 12-ти колоночная сетка, использование которой при верстке сайта и позволяет добиться его адаптации под различные типы устройств. Данная сетка проста в применении, достаточно добавить необходимые классы к блокам находящимся на разрабатываемой странице. Перед этим конечно же необходимо скачать данный фреймворк с сайта разработчика и подключить его в header при создании своего сайта.