Работа с breakpoints в Drupal 8
В Drupal 8 нет пользовательского интерфейса для редактирования breakpoints. Из-за того, что breakpoints определены в файлах конфигурации, также невозможно предоставить пользовательский интерфейс в contrib.
Breakpoints используются для разделения высоты или ширины областей просмотра (экранов, принтеров и других типов вывода мультимедиа) на этапы и обеспечивают случай, когда адаптивный дизайн настраивается для правильного отображения на разных устройствах. Модуль Breakpoints стандартизирует использование breakpoints и позволяет модулям и темам выставлять или использовать breakpoints друг друга. Модуль Breakpoints отслеживает breakpoints по высоте, ширине и разрешению.
Обратите внимание, что ввод ваших breakpoints CSS в файл breakpoints.yml необходим только тогда, когда Drupal необходимо взаимодействовать с breakpoints, как в случае с модулем Responsive Images.
Терминология
Breakpoints
Breakpoints состоит из метки и медиа-запроса. Медиа-запросы - это формальный способ кодирования breakpoints. Например, breakpoints ширины в 40em записывается как медиа-запрос '(min-width: 40em)'. Breakpoints на самом деле являются просто медиа-запросами с некоторыми дополнительными метаданными, такими как информация об имени и множителе.
Темы и модули могут определять Breakpoints, создавая файл конфигурации с именем myThemeOrModule.breakpoints.yml, где myThemeOrModule - это название вашей темы или модуля.
Каждая запись в этом файле определяет одну Breakpoints, состоящую из имени компьютера, по которому уникально идентифицируется запись точки останова, например, bartik.mobile и его дочерние элементы, определяющие свойства точки останова:
- label - удобочитаемая метка для breakpoint.
- mediaQuery - собственно текст медиа-запроса, например, 'all and (min-width: 851px)'.
- weight - Позиционный вес (заказ) для breakpoint.
- multipliers - Поддерживаемые множители разрешения пикселей.
Примечание. Порядок расположения Breakpoints по значению их веса чрезвычайно важен. Breakpoints с наименьшей минимальной шириной должны иметь наименьший вес, а Breakpoints с наименьшей минимальной шириной должны иметь большее значение веса. По умолчанию модули упорядочивают Breakpoints от наименьшего к наибольшему. Однако модули могут изменить этот порядок в случае необходимости: например, модуль Responsive Image заботится о переупорядочении Breakpoints от самых больших до самых маленьких в зависимости от значения веса.
Пример (bartik.breakpoints.yml):
bartik.mobile:
label: mobile
mediaQuery: ''
weight: 0
multipliers:
- 1x
bartik.narrow:
label: narrow
mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
weight: 1
multipliers:
- 1x
bartik.wide:
label: wide
mediaQuery: 'all and (min-width: 851px)'
weight: 2
multipliers:
- 1x
Breakpoint group
Breakpoints могут быть организованы в группы. Модули и темы должны использовать группы для разделения Breakpoints, которые должны использоваться для различных целей, таких как Breakpoints для макетов или Breakpoints для определения размера изображения.
Breakpoint group - это комбинация точек останова. Каждая тема или модуль может определять ноль или более breakpoint group. Breakpoint создается с помощью специальных идентификаторов и ключей Breakpoint. Указывать группу необязательно, если вы не укажете группу, группа будет называться так же, как ваша тема или модуль.
Например, в yourtheme.breakpoints.yml вы можете создать следующие две breakpoint groups:
yourtheme.group1.mobile:
label: narrow
mediaQuery: ''
weight: 0
multipliers:
- 1x
group: yourtheme.group1
yourtheme.group1.narrow:
label: narrow
mediaQuery: '(min-width: 560px)'
weight: 0
multipliers:
- 1x
- 2x
group: yourtheme.group1
yourtheme.group1.wide:
label: wide
mediaQuery: '(min-width: 851px)'
weight: 1
multipliers:
- 1x
- 2x
group: yourtheme.group1
yourtheme.group2.mobile:
label: narrow
mediaQuery: ''
weight: 0
multipliers:
- 1x
group: yourtheme.group2
yourtheme.group2.narrower:
label: narrow
mediaQuery: '(min-width: 400px)'
weight: 0
multipliers:
- 1x
- 2x
group: yourtheme.group2
yourtheme.group2.wider:
label: wide
mediaQuery: '(min-width: 1001px)'
weight: 1
multipliers:
- 1x
- 2x
group: yourtheme.group2
Запуск идентификатора breakpoints с именем машины темы или модуля, точки, а затем имени машины для группы, а затем использование того же идентификатора theme/module.group в ключе группы - это то, что создает breakpoint groups. Все breakpoint с теми же наборами ключей появятся в одной breakpoint groups.
В настоящее время невозможно создать пользовательскую метку для breakpoint groups за пределами имени машины, которое отображается в ключе группы. Это то, что будет отображаться в качестве метки, например, при выборе breakpoint groups в пользовательском интерфейсе модуля Responsive Image.
Расширенное использование
Вы также можете добавить breakpoint в breakpoint groups, определенные другими модулями или темами, но вы должны использовать полное имя.
Например, в yourmodule.breakpoints.yml вы можете сделать следующее:
yourmodule.yourtheme.group2.superwide
label: superwide
mediaQuery: '(min-width: 1501px)'
weight: 1
multipliers:
- 1x
- 2x
group: yourtheme.group2
Это добавит breakpoint, определенную в вашем модуле, к breakpoint groups, определенной в вашей теме.
Множители
Множители представляют собой меру разрешения устройства области просмотра, определяемую как соотношение между физическим размером пикселя активного устройства и независимым от устройства размером пикселя. Например, дисплеи «retina» имеют множитель 2x.
Модуль Breakpoint определяет множители 1x, 1,5x и 2x. При определении breakpoint модули и темы могут определять, какие множители применяются к каждой breakpoint.
Пример:
'1.5x' // supports Android '2x' // supports Mac retina display
Загрузить новые файлы breakpoint
Если вы добавите новый файл конфигурации breakpoint во время тестирования темы, вы можете перестроить кэши для просмотра новых breakpoint.