Клиентский проект · Разработка и поддержка сайта
Альфаматика
Уже год поддерживаем работоспособность alphamatica.ru и развиваем сайт: от новых модулей до точной адаптивной вёрстки.
alphamatica.ruМожно рассмотреть все блоки и прокрутить страницу вручную.
Наша основная работа для Альфаматики — комплексная поддержка и развитие существующего сайта. В течение года поддерживаем его работоспособность и реализуем новые задачи.
- Основная работа
- Разработка и комплексная поддержка сайта
- Сотрудничество
- 1 год
- Адаптивная система
- vw · от 1920 до 360 px
- Внедрение системы
- Страница «О компании» · /aboutPage
Внутри проекта
7 модуляОт 1920 до 360 — плавно
Система на vw сохраняет пропорции макета при любой ширине экрана от 1920 до 360 px.
АДАПТИВНАЯ ВЁРСТКА
Интерактивная иллюстрация подхода. Это демонстрационный код, не исходники клиентского проекта.
Посмотреть код
.page {
--unit: calc(100vw / 1920);
padding: calc(80 * var(--unit));
}
.title {
font-size: clamp(32px, 4.2vw, 80px);
}
@media (max-width: 600px) {
.page { padding: 20px; }
}Подробности реализации
Резиновая система стилизации
Разработали систему на единицах vw: размеры элементов зависят от ширины окна. Это позволяет сохранять соответствие макету не только на выбранных контрольных ширинах, но и между ними.
Диапазон — от 1920 до 360 пикселей. Систему внедрили на странице «О компании»: alphamatica.ru/aboutPage.