breakpoints.ymlファイルの基本的な用途は何ですか？

`breakpoints.ymlで定義されたブレークポイントの目的は何ですか？

メディアクエリがCSSファイルではなくbreakpoints.ymlで定義されているのはなぜですか？

8 theming

ブレークポイントは、さまざまなデバイスで正しく表示するためにレスポンシブデザインを調整する場所です。Breakpointsモジュールは、ブレークポイントの使用を標準化し、モジュールとテーマが互いのブレークポイントを公開または使用できるようにします。Breakpointモジュールは、高さ、幅、解像度のブレークポイントを追跡します。

— クライヴ

Foundationベースのカスタムテーマを使用しているので、これを実装することを考えていますが、現時点ではこれはまったく意味がないようです。はい、レスポンシブ画像モジュールはありますが、基本的にそれで十分です。私はそれをより良い将来の機能のように見ていますが、それが使用されるかどうかはわかりません。

drupal.org/documentation/modules/breakpoint

— kmdhrm

前処理または後処理なしに、CSSのbreakpoints.ymlファイルで定義されたブレークポイントを使用する方法はありません。コアのスタイリングにプロセッサを使用しないため、ブレークポイントはCSSファイルにハードコードされています。ただし、カスタムテーマではGulpやGruntなどのツールを自由に使用でき、理論的にはCSS生成にbreakpoints.yml入力を使用できます。

現在、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
ソース