マイライブラリ：レスポンシブデザイン（ブレークポイント、フレックスボックス）

Mana本

メディアクエリはCSSに記述する。

■ブレークポイント

デザインを切り替えるポイントとなる画面サイズをブレイクポイントと言う。
ブレイクポイントをいくつに設定するかとりあえず以下で！！
https://hashimotosan.hatenablog.jp/entry/2019/05/28/164834

◎560px未満をスマホと設定

@media (max-width:560px) {}

◎960px未満をタブレットと設定

@media (min-width:561px) and (max-width:960px) {}

■フレックスボックスの並びの変更
https://qiita.com/abetack/items/6f036cdc27aa5150c28b

下のようなフレックスボックスの親要素の場合

.page-header{
  display:flex;
  justify-content: space-between;
}

それをメディアクエリで560px以下の場合は、子要素を縦並びにして中央揃えにすると

.page-header{
  flex-direction:column;
  align-items:center;
}

通常はjustify-contentで横並びの均等配置
560px以下の場合はalign-itemsで縦並びの中央揃い

■グリッドレイアウトの場合

grid-template-columnsプロパティの値で、自動の列数を変えたり、画像1枚の最低値をセットできる。
下は、自動整列で、最低画像サイズ240px。

.gird{
 display:grid;
 gap:26px;
 gird-template-columns:repeat(auto-fit,minmax(240px,1fr));
}