Бувають випадки, коли потрібно, щоб макет був фіксованим, але реагував на ширину viewport.
Приклад із життя
Погляньмо на сайт Netflix через десктопний браузер. Персонаж та інші елементи масштабовані відносно ширини viewport. Це важливо для персонажа: фіксований макет забезпечує те, що дизайн завжди такий, як і передбачалося. Це також корисно для контент-дизайнерів: вони можуть створювати ресурси (assets) не хвилюючись про те, що, наприклад, лого телешоу може перекрити важливу частину зображення персонажа при певній ширині viewport.
Реалізація
Базова реалізація навдивовижу прямолінійна. Щоб зберегти простоту реалізації, перший приклад включатиме лише макет для великих viewports.
Крок 1:
Встановлюємо кореневий розмір шрифту (font-size) в vw одиницях, для прикладу 15px на ширину viewport в 1000px:
html {
font-size: 1.5vw;
}
Крок 2:
Використовуємо значення rem для всього, що має змінюватися відносно ширини viewport. Для прикладу:
h1 {
font-size: 2rem;
margin-bottom: 0.75rem;
}
Значення rem обраховується від кореневого розміру шрифту, котрий в даному прикладі є відносним до ширини viewport. Все ж, для деяких горизонтальних величин ви можете використати відсоткове значення.
Крок 3:
Використайте піксельні значення для всього, що не має відношення до ширини viewport. Для прикладу:
header {
font-size: 16px;
padding: 20px;
}
В коді на CodePen ви можете побачити спрощену версію інтерфейсу Netflix. Відкрийте CodePen в новій вкладці, де ви зможете змінювати розмір вікна браузера. Мета цього прикладу – показати базову реалізацію цієї техніки, цей код не є production-ready.
Що мені подобається в цій техніці: ви можете змінити масштаб фіксованого макета просто змінивши кореневий розмір шрифту. Або використати медіа-запити для масштабування фіксованого макета при певній min-width. Приклад:
Альтернативний підхід
Якщо ви не хочете встановлювати кореневий розмір шрифту як unit, тоді ви можете застосувати іншу техніку з такими ж результатами, які згадані вище:
Використайте змінну CSS та calc() ось так:
:root {
--base-size: 2vw;
}h1 {
font-size: calc(var(--base-size) * 2);
margin-bottom: calc(var(--base-size) * 0.75);
}
Але це складно писати, тому використаємо функцію SCSS:
@function vw($value) {
@return calc(var(--base-size) * #{$value});
}h1 {
font-size: vw(2);
margin-bottom: vw(0.75);
}
Зміна змінної CSS має такий же ефект, як і в першому підході. Просто пам'ятайте, що вам буде потрібно буде врахувати значення для браузерів, що не підтримують calc().
Інший граничний випадок
Ви ймовірно бачили такі журнали, як той, що зображено нижче. Часто вони розповідають про мистецтво, моду або нішову тему. Кожен макет був дбайливо створений і було витрачено години роботи, як на саме створення, так і на обговорення. Дизайн та контент разом створюють візуальний досвід.
Перетворення цього «експериментального журнального дизайну» на справжній вебсайт – це виклик. Ви повинні переконатися, що кожна деталь дизайну завжди виконує поставлені цілі — незалежно від ширини viewport.
Нижче показано приклад такого експериментального макета. Є три різні версії макета для малих, середніх та великих. Макети фіксовані, але масштабуються відносно ширини.
Висновок
Досліджувати та тестувати завжди цікаво. І як виявилося, є граничні випадки, де масштабування фіксованих макетів з units може бути життєздатним рішенням.
Але пам'ятайте про недоліки доступності: текст може бути занадто малим або великим, якщо у вас немає достатньої кількості брейкпоінтів. Також зум у браузері може не працювати, як належить. Тож якщо ви хочете використати таку техніку, найкращим підходом може бути поєднання стандартних макетів з малими viewports та масштабований фіксований макет для великих viewports.
Ще немає коментарів