Адаптивный и резиновый дизайн - это большая разница

bootstrap

В предыдущем уроке мы научились основам начала работы с фреймворком Bootstrap 3.

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

Многие ошибочно отождествляют адаптивный (отзывчивый) дизайн с резиновым.

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

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

Основные блоки в Bootstrap 3 – это контейнеры, которые на языке HTML5 выглядят следующим образом:

<div class="container">
...
</div>

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

Выглядеть это будет следующим образом:

<div class="container-fluid">
...
</div>

Хочу отметить, что резиновые сайты отходят на второй план, т.к. на очень больших мониторах выглядят, мягко говоря, плохо и становится неудобно с ними работать. Тенденция в разработке сайтов смещается к центрированию контента (удобству охвата взглядом для пользователя), при этом делая сайт адаптивным.

comments powered by Disqus