Від автора: У сьогоднішньому невеликому уроці ми навчимося створювати адаптивні макети сайту за допомогою властивості 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;. Отримане демо:
Висновок
У цій невеликій статті ми познайомилися з двома способами створення адаптивного макета на основі обтеканий. Хоча даний метод може і не підходити (і не повинен) під ваші вимоги для сучасного макета, сподіваюся, він виявиться хоч чимось корисним. Якщо ви працюєте з яким-небудь іншим технікам, розкажіть нам про це!
