Отзывчивый интерфейс

Адаптивные макеты в материальном дизайне адаптируются к любому возможному размеру экрана. Это руководство пользователя включает гибкую сетку, которая обеспечивает согласованность между макетами, подробные сведения о точках останова (точки прерывания) о перекомпоновке контента на разных экранах и описание того, как приложение может масштабироваться от маленьких до очень больших экранов.

1. Сводка и детализация содержимого макетов

Макеты шириной до 600dp могут заполнять экран одним уровнем иерархии контента (итоговый или подробный контент, но не оба). 

Макеты шириной более 600dp может отображать на экране два уровня иерархии содержимого (как сводный, так и подробный контент).

Для оптимальной работы пользовательские интерфейсы должны быть адаптированы макеты для следующих значений ширины контрольных точек:
Google: 480, 600, 840, 960, 1280, 1440 и 1600dp.
Windows 10: 360, 640, 1024 и 1366

2. Максимальная ширина экрана

Макеты размером более 1600dp могут увеличить масштаб до максимальной ширины. * Центрировать по центру с увеличенными полями;
* Оставаться выровненными слева, пока правый край растет;
* Продолжайте расти, показывая дополнительный контент;

Эти контрольные точки описывают спецификации столбцов и ширины для разных экранов, устройств и ориентации. Для некоторых измерений значения остаются одинаковыми, даже если устройство повернуто. По этой причине наименьшая ширина в любой ориентации является определяющим значением.

* 16dp, когда минимальная ширина устройства <600

** Рабочие контрольные точки на 16dp ниже перечисленных значений, чтобы учитывать различия в Chrome.

Интерфейс пользовательского интерфейса, отвечающего за дизайн материала, основан на 12-колоночном формате сетки. Эта сетка создает визуальную согласованность между макетами, позволяя при этом гибкость в самых разнообразных проектах. Количество столбцов сетки изменяется в зависимости от системы точек останова.

Реагирующая сетка фокусируется на постоянной ширине поля и ширине желоба, а не на ширине столбца. Поля и столбцы материального дизайна соответствуют квадратной сетке с квадратной базой в 8 точек на дюйм. Поля и водостоки могут быть 8, 16, 24 или 40dp в ширину. Поля и желоба не обязательно должны быть равными. Например, допустимо использовать поля 40dp и 24dp желобов в одном макете.