Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
1 г. назад

Фреймворк для адаптивной верстки

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

Шаг №1. Указываем viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

Об этом можно почитать в статье  Адаптация сайта на мобильных устройствах.

Шаг №2. Подключаем фреймворк.

Скачать можно его CSS или LESS-версию.

<link rel="stylesheet" href="css/mediaquery.css">

Шаг №3. Используем фреймворк.

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

В демке есть несколько плавающих блоков (левая и правая колонка, и два текстовых блока в подвале, пункты меню). Наша задача - при просмотре на мобильном устройстве, убрать свойства float и/или position:absolute. Для этого к блокам добавим класс fluid.

Клаcс fluid убирает эти свойства, что видно из кода.

@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 + .fluid {
    margin-top: 1rem !important;
  }
  .fluid__none {
    display: none !important;
  }
}

Также убирает ограничение по ширине и высоте. Например, шапка сайта имеет ограничение по высоте, а боковые колонки имею ограничение по ширине. При адаптивной верстки, не должно быть жестких ограничений ни по высоте, ни по ширине. В таком случае, браузер мобильного устройства будет автоматически подстраивается под разрешние дисплея, без дополнительного участия 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>

 

Комментарии

#александр аверкиев30.10.2015 00:33
У меня по первой статье получилось кое что подправить , а вот по фраемворку не получаетсяОтветить
#александр аверкиев30.10.2015 00:34
не получаетсяОтветить
#PaLyCH21.01.2016 16:25
Александр, статью обновили. Убрали определение девайсаОтветить

Добавить комментарий

Наверх