Адаптивный веб-дизайн

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

Адаптивная (или отзывчивая) верстка позволяет сайту подстраиваться под любые размеры браузера и корректно отображаться на устройствах с любым разрешением экрана.

---

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

---

В последнее время веб-мастера активно используют самописные или публичные CSS фреймворки для увеличения скорости верстки макета сайта. Один из наиболее распространенных способов сделать сайт адаптивным — использование CSS фреймворка. Самым популярным, на данный момент, фреймворком в мире является Bootstrap 3.

В основе отзывчивой верстки Bootstrap лежит сетка при помощи которой мы можем задавать размеры различным элементам сайта. Сетка поделена на 12 колонок. С помощью Bootstrap 3, можно назначать элементы которые будут скрываться или отображаться при определенном разрешении экрана.

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