Иной

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

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

Контрольные точки

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

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

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

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

Система контрольных точек

Эти контрольные точки описывают спецификации столбцов и ширины для разных экранов, устройств и ориентации. Для некоторых измерений значения остаются одинаковыми, даже если устройство повернуто. По этой причине наименьшая ширина в любой ориентации является определяющим значением.
Точка прерывания вертикально
портрет
горизонтально
пейзаж
Окно Столбцы Канава
0 маленький
смартфон
нет мелкое 4 16
360 средний
смартфон
нет мелкое 4 16
400 большой
смартфон
нет мелкое 4 16
480 большой
смартфон
маленький
смартфон
мелкое 4 16
600 большой
планшет
средний
смартфон
маленькое 8 16/24*
640 телефоны нету маленькое 1 12#
720 большой
планшет
большой
смартфон
маленькое 8 16/24*
840 большой
планшет
большой
смартфон
маленькое 12 16/24*
960 нет маленький
планшет
маленькое 12 24
1008 нету Фаблеты,
планшеты,
ТВ
большое 2 24#
1024 ** большой
планшет
среднее 12 24
1280 ** большой
планшет
среднее 12 24
1440 ** нет большое 12 24
1600 ** нет большое 12 24
1920 ** нет огромное 12 24
1008++ нету Компьютеры, ноутбуки большое 3 24#
Точка прерывания вертикально
портрет
горизонтально
пейзаж
Окно Столбцы Канава
* 16dp, когда минимальная ширина устройства <600

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

Сетка

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

Поля и сточные канавы

Реагирующая сетка фокусируется на постоянной ширине поля и ширине желоба, а не на ширине столбца. Поля и столбцы материального дизайна соответствуют квадратной сетке с квадратной базой в 8 точек на дюйм. Поля и водостоки могут быть 8, 16, 24 или 40dp в ширину. Поля и желоба не обязательно должны быть равными. Например, допустимо использовать поля 40dp и 24dp желобов в одном макете.
Телефоны / Фаблеты, планшеты, ТВ / Компьютеры, ноутбуки, устройства Surface Hub
#53 Наёмники. Игра
Играй прямо в браузере!