在 Drupal 8 中使用断点 (breakpoints)
在 Drupal 8 中没有用于编辑 breakpoints 的用户界面。由于 breakpoints 是在配置文件中定义的，因此在 contrib 模块中也无法提供用户界面。
Breakpoints 用于将视口（屏幕、打印机和其他媒体输出类型）的高度或宽度划分为阶段，并确保响应式设计能够在不同设备上正确显示。Breakpoints 模块标准化了 breakpoints 的使用，并允许模块和主题公开或使用彼此的 breakpoints。Breakpoints 模块根据高度、宽度和分辨率来跟踪 breakpoints。
请注意，只有在 Drupal 需要与 breakpoints 交互时（例如 Responsive Images 模块），才需要在 breakpoints.yml 文件中输入 CSS breakpoints。
术语
Breakpoints
Breakpoint 由一个标签和一个媒体查询组成。媒体查询是编码 breakpoints 的正式方式。例如，宽度为 40em 的 breakpoint 被写作媒体查询 '(min-width: 40em)'。Breakpoints 实际上只是带有一些附加元数据（如名称和分辨率倍数信息）的媒体查询。
主题和模块可以通过创建一个名为 myThemeOrModule.breakpoints.yml 的配置文件来定义 Breakpoints，其中 myThemeOrModule 是你的主题或模块的名称。
该文件中的每一条目定义一个 Breakpoint，由唯一标识的机器名称组成，例如 bartik.mobile 及其子元素，用于定义该 breakpoint 的属性：
- 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 是 Breakpoints 的组合。每个主题或模块可以定义零个或多个 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
以主题或模块的机器名称开头、加点、再加组的机器名称来启动 breakpoint 标识符，然后在 group 键中使用相同的 theme/module.group 标识符，这就是创建 breakpoint groups 的方式。所有具有相同键集的 breakpoints 将出现在同一个 breakpoint group 中。
目前无法为 breakpoint groups 创建机器名称之外的自定义标签。该名称会显示为标签，例如在 Responsive Image 模块的用户界面中选择 breakpoint groups 时显示。
高级用法
你还可以将 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 倍数。在定义 breakpoints 时，模块和主题可以指定哪些倍数适用于每个 breakpoint。
示例：
'1.5x' // 支持 Android '2x' // 支持 Mac retina 显示器
加载新的 breakpoint 文件
如果你在测试主题时添加了新的 breakpoint 配置文件，可以重建缓存以查看新的 breakpoints。