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