Порада: як створити адаптивний макет сайту за допомогою обтеканий

20

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

Як створити адаптивний макет

Скажімо, ми хочемо створити ось такий картковий макет:

Щоб ви зрозуміли ідею, я створив версію на весь екран

Базові стилі

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

Порада: як створити адаптивний макет сайту за допомогою обтеканий

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

  • Порада: як створити адаптивний макет сайту за допомогою обтеканий
    Some description here

CSS макетів:

/* базові стилі */
body {
width: 80%;
max-width: 1200 px;
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 стилі. Зверніть увагу, що медіа запити підсумовуються, тобто при оголошенні нового запиту нам необхідно скидати попередню картку:

@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 колонки на великих екранах.

  • Порада: як створити адаптивний макет сайту за допомогою обтеканий
    Some description here

Якщо всі колонки однакової висоти, то, звичайно, крім цієї розмітки нам більше нічого не потрібно. Але в нашому прикладі всі колонки різних розмірів, а значить, нам потрібно скидати обтікання. В цьому нам допоможе клас clearfix і класи адаптивних утиліт.

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

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

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

Додаткова розмітка злегка негарно (багато хто не люблять використовувати розмітку для управління стилями), але вона працює, і ми отримуємо точно такий же результат, як і в попередньому способі. Всі додаткові елементи списку заховані і працюють як невидимі роздільники рядків, крім випадків для певних розмірів екрану, там стоїть властивість display: block;. Отримане демо:

Висновок

У цій невеликій статті ми познайомилися з двома способами створення адаптивного макета на основі обтеканий. Хоча даний метод може і не підходити (і не повинен) під ваші вимоги для сучасного макета, сподіваюся, він виявиться хоч чимось корисним. Якщо ви працюєте з яким-небудь іншим технікам, розкажіть нам про це!