Как отрисовать дизайн мобильной версии сайта?
ДизайнСайты+2
Анонимный вопрос · · 4,4 K
Первым делом создаем артборд/фрейм с размерами телефона. В Figma есть уже предустановленные размеры для iPhone и Android. 🔥👌
Добавляем сетку для мобильного размера экрана, если для веба было 12 колонок, то для планшета будет уже 8, а для телефона 4 колонки. И блок за блоком переносим блоки сайта с веб-версии. Уменьшаем размер шрифтов, выстраиваем блоки контента друг под другом. Сворачиваем меню за кнопку гамбургера.
Полезное:
Если у вас есть макет для обычной версии (например, 1280), проанализируйте, какие блоки на нём играют ключевую роль. Откройте Фигму, создайте фрейм шириной 320px. Отрисуйте блоки в виде простого одноколонного списка. Если в... Читать далее
Уже давно предпочтение отдается адаптивной верстке вместо создания мобильной версии сайта на отдельном домене. Это решение имеет множество преимуществ, но и требует понимания ряда нюансов. Для создания дизайна мобильной версии... Читать далее
Через свойство в css
код
код
@media (max-width: 480px) {
здесь прописываются отдельные свойства для мобильной версии.
Например, p {margin:5}
}
код
код Читать далее