базовые правила
school_flashfamily
тильда гуру
- Хедер
- Футер
- Кнопки
- Ссылки
- Инпуты
адаптива
school_flashfamily
задача адаптива
тильда гуру
Сделать сайт одинаково понятным и удобным для всех устройств. Самые распространённые версии — десктопная и мобильная
school_flashfamily
таблица с отступами
тильда гуру
При адаптиве первого блока рекомендуется фиксировать в таблице все ключевые значения: размеры заголовков, наборного текста, интерлиньяж, отступы внутри и между блоков. И ориентироваться на неё при вёрстке последующих блоков
school_flashfamily
адаптив в зероблоках
тильда гуру
Делается в соответствующих брейкпоинтах: горизонтальный планшет, вертикальный планшет, горизонтальная мобильная версия, вертикальная мобильная версия.
Важно сохранить последовательность контента как в десктопе
Важно сохранить последовательность контента как в десктопе
school_flashfamily
горизонтальный планшет
тильда гуру
Вёрстка почти не отличается от десктопа
school_flashfamily
тильда гуру
school_flashfamily
горизонтальный планшет
тильда гуру
Раскрывающиеся по наведению или клику блоки нужно верстать без анимации, так как важно показать текст без дополнительного действия. Аналогично делается в остальном адаптиве
school_flashfamily
тильда гуру
school_flashfamily
вертикальный планшет
тильда гуру
Визуал распределяем сверху или снизу блока. Остальной контент — по иерархии
school_flashfamily
тильда гуру
school_flashfamily
горизонтальная мобильная версия
тильда гуру
Чаще всего делается по аналогии с вертикальным планшетом, но размер кегля и отступы делаются как в вертикальной мобильной версии.
В современных смартфонах в горизонтальной ориентации подтягивается версия вертикального планшета
В современных смартфонах в горизонтальной ориентации подтягивается версия вертикального планшета
school_flashfamily
вертикальная мобильная версия
тильда гуру
Как правило, мы верстаем в грид-контейнере, но для соблюдения пропорций на разных моделях телефона используем автоскейл
school_flashfamily
тильда гуру
school_flashfamily
адаптив стандартных блоков
тильда гуру
Стандартные блоки адаптируются самостоятельно,
но не всегда хорошо. Иногда нужно копировать блоки и изменять в них контент для корректного отображения в адаптиве
но не всегда хорошо. Иногда нужно копировать блоки и изменять в них контент для корректного отображения в адаптиве
school_flashfamily
тильда гуру
school_flashfamily
тильда гуру
Кадрируем изображение
school_flashfamily
тильда гуру
Копируем блок и заменяем изображение. Ставим видимость блока <980. У десктопной версии ставим видимость >980.
Теперь в адаптиве будет отображаться блок с кадрированным изображением
Теперь в адаптиве будет отображаться блок с кадрированным изображением
school_flashfamily
тильда гуру
flash_family
спасибо :)
school_flashfamily
flashfamily
school.flashfamily
тильда гуру
1/14
