Drupal 8でのブレークポイントの操作
Drupal 8にはブレークポイントを編集するためのユーザーインターフェースはありません。ブレークポイントが設定ファイルで定義されているため、contribでユーザーインターフェースを提供することもできません。
ブレークポイントは、ビューポート（画面、プリンター、その他の種類のメディア出力）の高さまたは幅をステージに分割するために使用され、レスポンシブデザインがさまざまなデバイスで正しく表示されるように調整されるケースを提供します。Breakpointsモジュールはブレークポイントの使用を標準化し、モジュールとテーマが相互のブレークポイントを公開または使用できるようにします。Breakpointsモジュールは、高さ、幅、解像度ごとにブレークポイントを追跡します。
CSSブレークポイントをbreakpoints.ymlファイルに入力する必要があるのは、Responsive Imagesモジュールの場合のように、Drupalがブレークポイントと対話する必要がある場合のみであることに注意してください。
用語
ブレークポイント
ブレークポイントは、ラベルとメディアクエリで構成されます。メディアクエリはブレークポイントをエンコードする正式な方法です。たとえば、幅40emのブレークポイントは、メディアクエリ'(min-width: 40em)'として記述されます。ブレークポイントは実際には、名前や乗数などの追加のメタデータを持つ単なるメディアクエリです。
テーマとモジュールは、myThemeOrModule.breakpoints.ymlという名前の設定ファイルを作成することでブレークポイントを定義できます。ここで、myThemeOrModuleはテーマまたはモジュールの名前です。
このファイルの各エントリは、ブレークポイントエントリを一意に識別するマシン名（例：bartik.mobile）と、ブレークポイントのプロパティを定義する子要素で構成される1つのブレークポイントを定義します：
- label - ブレークポイントの人間が読めるラベル。
- mediaQuery - メディアクエリのテキスト自体。例：'all and (min-width: 851px)'。
- weight - ブレークポイントの位置の重み（順序）。
- multipliers - サポートされるピクセル解像度の乗数。
注：ブレークポイントをweight値で並べる順序は非常に重要です。最小幅が最も小さいブレークポイントには最小のweightを設定し、最小幅が最も大きいブレークポイントにはより大きなweight値を設定する必要があります。デフォルトでは、モジュールはブレークポイントを最小から最大の順に並べます。ただし、モジュールは必要に応じてこの順序を変更できます。たとえば、Responsive Imageモジュールは、weight値に基づいてブレークポイントを最大から最小の順に並べ替えます。
例（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ブレークポイントグループ
ブレークポイントはグループに編成できます。モジュールとテーマは、レイアウト用のブレークポイントや画像サイズの決定用のブレークポイントなど、さまざまな目的で使用されるブレークポイントを分離するためにグループを使用する必要があります。
ブレークポイントグループはブレークポイントの組み合わせです。各テーマまたはモジュールは、0個以上のブレークポイントグループを定義できます。ブレークポイントグループは、特定のブレークポイントIDとキーを使用して作成されます。グループを指定する必要はありません。グループを指定しない場合、グループはテーマまたはモジュールと同じ名前になります。
たとえば、yourtheme.breakpoints.ymlで次の2つのブレークポイントグループを作成できます：
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ブレークポイントIDをテーマまたはモジュールのマシン名、ドット、グループのマシン名で始め、グループキーに同じテーマ/モジュールグループIDを使用することが、ブレークポイントグループを作成する方法です。同じキーセットを持つすべてのブレークポイントが同じブレークポイントグループに表示されます。
現在、グループキーに表示されるマシン名以外にブレークポイントグループのカスタムラベルを作成することはできません。たとえば、Responsive Imageモジュールのユーザーインターフェースでブレークポイントグループを選択するときに、これがラベルとして表示されます。
高度な使用法
他のモジュールやテーマによって定義されたブレークポイントグループにブレークポイントを追加することもできますが、完全な名前を使用する必要があります。
たとえば、yourmodule.breakpoints.ymlで次のようにできます：
yourmodule.yourtheme.group2.superwide
label: superwide
mediaQuery: '(min-width: 1501px)'
weight: 1
multipliers:
- 1x
- 2x
group: yourtheme.group2これにより、モジュールで定義されたブレークポイントが、テーマで定義されたブレークポイントグループに追加されます。
乗数
乗数は、ビューポートのデバイス解像度の尺度であり、アクティブなデバイスの物理ピクセルサイズとデバイス非依存ピクセルサイズの比率として定義されます。たとえば、「Retina」ディスプレイの乗数は2xです。
Breakpointモジュールは、1x、1.5x、2xの乗数を定義します。ブレークポイントを定義するとき、モジュールとテーマは各ブレークポイントに適用される乗数を指定できます。
例：
'1.5x' // supports Android
'2x' // supports Mac retina display新しいブレークポイントファイルをロードする
テーマのテスト中に新しいブレークポイント設定ファイルを追加した場合、キャッシュを再構築して新しいブレークポイントを表示できます。