От автора: В сегодняшнем небольшом уроке мы научимся создавать адаптивные макеты сайта с помощью свойства CSS float — старого, но проверенного способа. После мы посмотрим, как с этим же справляется Bootstrap. Изначально обтекания не были предназначены для создания базовой структуры страницы (в последних стандартах типа flexbox и grid эта проблема решена), так что работа с ними может быть немного запутанной. Разберем пример.
Как создать адаптивный макет
Скажем, мы хотим создать вот такой карточный макет:
Чтобы вы поняли идею, я создал версию на весь экран
Базовые стили
В карточках нам нельзя задавать фиксированную высоту подписей к изображениям, кроме того их ширина также не должна быть фиксированной. А значит, чтобы карточки были нормального размера и не сужались слишком сильно, в зависимости от ширины области просмотра необходимо показывать разное количество колонок. Для этого мы прописали несколько медиа запросов с данными из таблицы:
Ниже представлена разметка. В элементах списка в теге figure хранятся изображения и подписи к ним:
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="clearfix"> <li> <figure> <img src="path-to-the-image" alt=""> <figcaption>Some description here</figcaption> </figure> </li> <!—элементы списка --> </ul> |
CSS макета:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
/* базовые стили */ body { width: 80%; max-width: 1200px; margin: 40px auto; font: normal 14px/1.5 "Montserrat", "Helvetica Neue", sans-serif; background: #cfd8dc; color: #37474f; } figure { background: whitesmoke; margin: 0 0 40px; box-shadow: 0px 2px 4px rgba(0,0,0,0.2); } figcaption { padding: 20px; } img { max-width: 100%; height: auto; display: block; } .clearfix:after { content: ""; display: table; clear: both; } ul { margin: 0; padding: 0; } /* структурные стили */ li { list-style-type: none; float: left; padding-left: 15px; padding-right: 15px; box-sizing: border-box; } /* медиа запросы */ @media screen and (min-width: 400px) { li { width: 50%; } } @media screen and (min-width: 768px) { li { width: 33.333%; } } @media screen and (min-width: 1024px) { li { width: 25%; } } |
В конце стилей прописаны медиа запросы, которые задают ширину карточки для конкретных разрешений экрана. Ниже получившееся демо:
Так как мы не очищаем строки, то некоторые карточки, пытаясь перестроиться влево, застревают в неположенных местах — проблема гибкого макета.
Как найти карточку которую необходимо сбросить вниз
Исходя из примера выше, когда в одном ряду у нас помещается 4 карточки, то пятую необходимо сбросить на новую строку, затем девятую и т.д. В этом нам поможет CSS псевдокласс :nth-of-type(an+b), где ab+b параметр шаблона повторения. К примеру, на больших экранах (т.е. ≥1024px) мы используем шаблон 4n+1. Эта формула находит каждый четвертый элемент и выбирает следующий за ним.
В таблице показано, как нужно изменить медиа запросы, чтобы элементы перепрыгивали на новую строку:
Ниже представлены CSS стили. Обратите внимание, что медиа запросы суммируются, т.е. при объявлении нового запроса нам необходимо сбрасывать предыдущую карточку:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
@media screen and (min-width: 400px) { li { width: 50%; } li:nth-of-type(2n+1) { clear: left; } } @media screen and (min-width: 768px) { li { width: 33.333%; } li:nth-of-type(2n+1) { clear: none; } li:nth-of-type(3n+1) { clear: left; } } @media screen and (min-width: 1024px) { li { width: 25%; } li:nth-of-type(3n+1) { clear: none; } li:nth-of-type(4n+1) { clear: left; } } |
Также стоит упомянуть:
Вместо свойства clear:left мы могли точно так же взять более общее свойство clear:both.
Вместо псевдокласса :nth-of-type(an+b) можно было взять :nth-child(an+b).
После того, как мы узнали, как сбрасывать обтекания одним способом, давайте рассмотрим метод на Bootstrap.
Метод Bootstrap
С помощью системы сеток в Bootstrap мы можем построить точно такой же адаптивный макет, как в предыдущем примере. И опять же, наш макет будет изменяться под разные размеры экрана:
Ниже HTML разметка, в которой задано, что элементы списка будут занимать 6 из 12 колонок на очень маленьких экранах, 4 колонки на маленьких и 3 колонки на больших экранах.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="container"> <ul class="row"> <li class="col-xs-6 col-sm-4 col-lg-3"> <figure> <img src="path-to-the-image" alt="" class="img-responsive"> <figcaption>Some description here</figcaption> </figure> </li> <!—- элементы списка --> </ul> </div> |
Если все колонки одинаковой высоты, то, обычно, кроме этой разметки нам больше ничего не нужно. Но в нашем примере все колонки разных размеров, а значит, нам нужно сбрасывать обтекания. В этом нам поможет класс clearfix и классы адаптивных утилит.
Первое – на экстра маленьких экранах (<768px) у нас двухколоночный макет, т.е. мы должны сбрасывать обтекания после каждого второго элемента. Вставьте строку ниже после каждого второго элемента в списке:
|
1 |
<li class="clearfix visible-xs-block"></li> |
Далее, на маленьких и средних экранах (≥768px и <1200px) у нас трехколоночный макет, т.е. обтекания необходимо сбрасывать после каждого третьего элемента. Для этого необходимо вставить строку ниже после каждого третьего элемента в списке (после последнего необязательно):
|
1 |
<li class="clearfix visible-sm-block visible-md-block"></li> |
И наконец, на больших экранах (≥1200px) у нас четырехколоночный макет, т.е. обтекания необходимо сбрасывать после каждого четвертого элемента списка. Точно так же вставьте строку ниже после каждого четвертого элемента списка:
|
1 |
<li class="clearfix visible-lg-block"></li> |
Дополнительная разметка выглядит слегка некрасиво (многие не любят использовать разметку для управления стилями), но она работает, и мы получаем точно такой же результат, как и в прошлом способе. Все дополнительные элементы списка спрятаны и работают как невидимые разделители строк, кроме случаев для определенных размеров экрана, там стоит свойство display: block;. Полученное демо:
Заключение
В этой небольшой статье мы познакомились с двумя способами создания адаптивного макета на основе обтеканий. Хотя данный метод может и не подходить (и не должен) под ваши требования для современного макета, надеюсь, он окажется хоть в чем-то полезным. Если вы работаете по каким-либо другим техникам, расскажите нам об этом!
Автор: George Martsoukos
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
