Простой фреймворк для адаптивной верстки
В предыдущих двух статьях, мы рассмотрели принцип адаптивной верстки под мобильные устройства. За полгода было сверстанно несколько проектов с учетом мобильных устройств. И пришли к некому фреймворку, которые значительно сэкономит время при быстрой адаптации сайта под смартфоны. При этом фреймворк получился гениально простым.
Шаг №1. Указываем viewport
<meta name="viewport" content="width=device-width, initial-scale=1">Об этом можно почитать в статье Адаптация сайта на мобильных устройствах.
Шаг №2. Подключаем фреймворк.
Вставляете код в ваш LESS или SCSS файл:
@media (max-width : 800px) {
.fluid {
float : none !important;
width : auto !important;
margin-left : 0 !important;
margin-right : 0 !important;
max-width : 100% !important;
position : static !important;
height : auto !important;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
box-sizing : border-box;
& + .fluid {
margin-top : 1rem !important;
}
}
.fluid__none {
display : none !important;
}
}Шаг №3. Используем фреймворк.
При использовании данного фреймворка Все блоки в адаптивном шаблоне следуют друг за другом на небольших разрешениях, таким образом шаблон выглядит как общий поток, без боковых панелей. Идут один за другим.
В демке есть несколько плавающих блоков (левая и правая колонка, и два текстовых блока в подвале, пункты меню). Наша задача — при просмотре на мобильном устройстве, убрать свойства float и/или position:absolute. Для этого к блокам добавим класс fluid.
Клаcс fluid убирает эти свойства, что видно из кода выше.
Также убирает ограничение по ширине и высоте. Например, шапка сайта имеет ограничение по высоте, а боковые колонки имею ограничение по ширине. При адаптивной верстки, не должно быть жестких ограничений ни по высоте, ни по ширине. В таком случае, браузер мобильного устройства будет автоматически подстраивается под разрешние дисплея, без дополнительного участия CSS.
В случае, когда один за другим следуют плавающие блоки, между ними появляется внешний верхний отступ, что бы не было визуального склеивания.
Если необходимо, скрыть какой-то блок/-и, то просто добавьте класс fluid_none к классу элемента.
Шаг №4. Пример использования
<div class="b__leftside fl fluid">
<div class="b__leftside-item">
<div class="b__leftside-item-title">
Блок левой колонки.
</div>
<div class="b__leftside-item-body">
<p>Проблема адаптивной верстки весьма легко решается. Для любых задач мы придумали гениально-простой фреймворк, состоящий из 26 строчек кода.</p>
<p>Достаточно любому плавающему или абсолютному блоку добавить класс <em>fluid</em>, и он станет элемент потока страницы.</p>
</div>
</div>
<div class="b__leftside-item">
<div class="b__leftside-item-title">
Блок левой колонки с картиночкой.
</div>
<div class="b__leftside-item-body">
<p>Сюда можно воткнуть все что угодно. Например, резиновая картиночка:</p>
<img src="temp/cat1.jpg" alt="Котик" class="fi"/>
<p>Что бы картинка стала резиновой, мы ей добавляем класс <em>fi</em></p>
</div>
</div>
</div>
