Mostly Fluid (Наиболее резиновый)
Шаблон Mostly fluid состоит главным образом из "резиновой" сетки. На экранах большой или средней ширины ее размер обычно остается неизменным, в то время как на больших экранах регулируются только поля.
Для того, чтобы окончательно для себя закрепить тему responsive дизайна, я решил создать этот небольшой сайт, отображающий 5 наиболее популярных паттернов отзывчивого веб-дизайна.
Все паттерны используют в своей основе Flexbox. Если руки дойдут, повторю всё в Grid.
За основу взят материал из статьи "Приемы отзывчивого веб-дизайна" от Pete LePage.
Шаблон Mostly fluid состоит главным образом из "резиновой" сетки. На экранах большой или средней ширины ее размер обычно остается неизменным, в то время как на больших экранах регулируются только поля.
В макетах, состоящих из нескольких столбцов, которые занимают всю ширину экрана, шаблон Column Drop просто размещает столбцы один за одним по вертикали, когда ширина окна становится слишком небольшой для отображения всего контента.
Шаблон Layout shifter является наиболее отзывчивым, поскольку в нем предусмотрено наличие нескольких контрольных точек для экранов различной ширины. Основным отличием этого макета является то, что вместо перерасчета дерева отрисовки и размещения столбцов друг под другом перемещается контент.
Шаблон Tiny Tweaks (Крошечные изменения) просто вносит небольшие изменения в макет, например, регулирует размер шрифта, меняет размер изображений или перемещает контент.
Вместо того чтобы размещать элементы контента вертикально друг под другом, шаблон размещает контент, который используется редко, скажем, элементы навигации или меню приложения за пределами экрана, показывая его только тогда, когда это позволяет сделать размер экрана. На небольших же экранах контент можно открыть одним щелчком.