Що таке «fluid design»?
Fluid design (або liquid layout) - це підхід, за якого ширини елементів задаються у відносних одиницях, найчастіше %, завдяки чому макет розтягується разом із вікном браузера, плавно змінюючи розміри без жорстких «сходинок».
Головна ідея
Блоки підлаштовуються під ширину viewport'а, займаючи пропорційну частину доступного простору.
Характерні ознаки
- ширина задається у відсотках:
width: 50%,70%,100% - елементи розтягуються або стискаються при зміні ширини екрана
- шрифти і відступи теж можуть бути відносними (наприклад,
vw,%,em) - сайт виглядає «гумовим» без фіксованих меж
Порівняння з іншими підходами
| Підхід | Що масштабується |
|---|---|
| Fixed | нічого, жорсткі px |
| Fluid / Liquid | блоки за шириною (через %, vw) |
| Elastic | масштаб від розміру шрифту (em, rem) |
| Responsive | перебудови через media queries |
Підсумок
Fluid design - це «гумовий» макет, де елементи змінюють ширину плавно і пропорційно ширині екрана, створюючи гнучку, розтягувану сітку.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.