Совет: как создать адаптивный макет сайта с помощью обтеканий

Совет: как создать адаптивный макет сайта с помощью обтеканий

От автора: В сегодняшнем небольшом уроке мы научимся создавать адаптивные макеты сайта с помощью свойства CSS float — старого, но проверенного способа. После мы посмотрим, как с этим же справляется Bootstrap. Изначально обтекания не были предназначены для создания базовой структуры страницы (в последних стандартах типа flexbox и grid эта проблема решена), так что работа с ними может быть немного запутанной. Разберем пример.

Как создать адаптивный макет

Скажем, мы хотим создать вот такой карточный макет:

Чтобы вы поняли идею, я создал версию на весь экран

Базовые стили

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Ниже представлена разметка. В элементах списка в теге figure хранятся изображения и подписи к ним:

CSS макета:

В конце стилей прописаны медиа запросы, которые задают ширину карточки для конкретных разрешений экрана. Ниже получившееся демо:

Так как мы не очищаем строки, то некоторые карточки, пытаясь перестроиться влево, застревают в неположенных местах — проблема гибкого макета.

Как найти карточку которую необходимо сбросить вниз

Исходя из примера выше, когда в одном ряду у нас помещается 4 карточки, то пятую необходимо сбросить на новую строку, затем девятую и т.д. В этом нам поможет CSS псевдокласс :nth-of-type(an+b), где ab+b параметр шаблона повторения. К примеру, на больших экранах (т.е. ≥1024px) мы используем шаблон 4n+1. Эта формула находит каждый четвертый элемент и выбирает следующий за ним.

В таблице показано, как нужно изменить медиа запросы, чтобы элементы перепрыгивали на новую строку:

Ниже представлены CSS стили. Обратите внимание, что медиа запросы суммируются, т.е. при объявлении нового запроса нам необходимо сбрасывать предыдущую карточку:

Также стоит упомянуть:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вместо свойства clear:left мы могли точно так же взять более общее свойство clear:both.

Вместо псевдокласса :nth-of-type(an+b) можно было взять :nth-child(an+b).

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

Метод Bootstrap

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

Ниже HTML разметка, в которой задано, что элементы списка будут занимать 6 из 12 колонок на очень маленьких экранах, 4 колонки на маленьких и 3 колонки на больших экранах.

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

Первое – на экстра маленьких экранах (<768px) у нас двухколоночный макет, т.е. мы должны сбрасывать обтекания после каждого второго элемента. Вставьте строку ниже после каждого второго элемента в списке:

Далее, на маленьких и средних экранах (≥768px и <1200px) у нас трехколоночный макет, т.е. обтекания необходимо сбрасывать после каждого третьего элемента. Для этого необходимо вставить строку ниже после каждого третьего элемента в списке (после последнего необязательно):

И наконец, на больших экранах (≥1200px) у нас четырехколоночный макет, т.е. обтекания необходимо сбрасывать после каждого четвертого элемента списка. Точно так же вставьте строку ниже после каждого четвертого элемента списка:

Дополнительная разметка выглядит слегка некрасиво (многие не любят использовать разметку для управления стилями), но она работает, и мы получаем точно такой же результат, как и в прошлом способе. Все дополнительные элементы списка спрятаны и работают как невидимые разделители строк, кроме случаев для определенных размеров экрана, там стоит свойство display: block;. Полученное демо:

Заключение

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

Автор: George Martsoukos

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree