breakpoints.yml文件的基本用途是什么？

`breakpoints.yml中定义的断点的目的是什么？

为什么在breakpoints.yml中而不是在CSS文件中定义媒体查询？

8 theming

— Prakhyat
source

响应点设计可以在断点处进行调整，以便在不同设备上正确显示。Breakpoints模块标准化了断点的使用，并使模块和主题可以公开或使用彼此的断点。断点模块跟踪高度，宽度和分辨率断点。

— 克莱夫（Clive）

因为我使用基于基金会的自定义主题，所以我只是在考虑实现此目的，但是在我看来，这目前毫无意义。是的，有响应式图像模块，但这基本上就是它的全部优点。我认为它更像是一项未来的功能，很不错，但是不知道它是否会被使用。

drupal.org/documentation/modules/breakpoint

— kmdhrm

如果不进行预处理，则无法使用CSS中breakpoints.yml文件中定义的断点。由于我们不在核心中使用处理器进行样式设置，因此断点仍在CSS文件中进行了硬编码。但是，在自定义主题中，您可以自由使用Gulp或Grunt之类的工具，并且从理论上讲，可以将breakpoints.yml输入用于CSS生成。

当前，breakpoints.yml对于JavaScript（JS）来说非常有趣。例如，查看核心中的工具栏模块。将断点信息添加到“ src / Element / Toolbar.php”中的“ drupalSettings” JS对象中，如下所示：

$breakpoints = static::breakpointManager()->getBreakpointsByGroup('toolbar');
if (!empty($breakpoints)) {
  $media_queries =  array();
  foreach ($breakpoints as $id => $breakpoint) {
    $media_queries[$id] = $breakpoint->getMediaQuery();
  }

  $element['#attached']['drupalSettings']['toolbar']['breakpoints'] = $media_queries;
}

然后在JS中读取上面定义的运行时设置。

var options = $.extend(
  {
    breakpoints: {
      'toolbar.narrow': '',
      'toolbar.standard': '',
      'toolbar.wide': ''
    }
  },
  drupalSettings.toolbar
);

稍后，每个断点都会添加一个事件侦听器，以便在屏幕大小更改时可以执行“某些操作”。

for (var label in options.breakpoints) {
  if (options.breakpoints.hasOwnProperty(label)) {
    var mq = options.breakpoints[label];
    var mql = Drupal.toolbar.mql[label] = window.matchMedia(mq);
    mql.addListener(Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label));
  }
}

如果发生更改，则每个断点可以采取不同的措施。

Drupal.toolbar = {
  mediaQueryChangeHandler: function (model, label, mql) {
    switch (label) {
      case 'toolbar.narrow':
        model.set({
          isOriented: mql.matches,
          isTrayToggleVisible: false
        });
        break;

      case 'toolbar.standard':
        // Logic
        break;

      case 'toolbar.wide':
        // Logic
        break;

      default:
        break;
    }
  }
};

注意：这些代码示例摘自Drupal工具栏模块，并已剥离。用作灵感，而不是功能代码。

可以在以下位置找到有关一般使用JS mediaQueries的很好的解释：https : //developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

— dmsmidt
source