● css によるコンテナクエリ

画面幅ではなく、一番直近の親要素の幅によって、CSSのプロパティの値を変えたい時にコンテナクエリが使えます。

親要素の基準コンテナを設定する container-type

container-type: コンテナクエリを使うときに、対象の要素をコンテナとして定義するためのプロパティ。

.container {
  container-type: inline-size;
}

指定できる値

例えば、親要素の幅が160px以下になったらボタンのpaddingを減らす場合：

.container {
  container-type: inline-size;
}

@container (max-width: 160px) {
  button {
    padding-inline: 8px;
  }
}

inline-size は通常の横書きでは、ほぼ width と考えてOK。

CSSのコンテナクエリでボタンのpaddingを変更する

親要素をコンテナとして定義し、幅に応じてボタンの padding を変更できます。

.container {
  container-type: inline-size;
}

button {
  padding: 12px 24px;
}

@container (max-width: 160px) {
  button {
    padding: 8px 12px;
  }
}

親要素の幅が 160px以下になると、ボタンの padding が小さくなります。

ポイントは、160px はボタン自身の幅ではなく、コンテナ（親要素）の幅を基準に判定されることです。