インタラクティブレイアウトメディアquery

🔎 Mediaqueryの使用方法

@media screen and (max-width : 1200px) { 
  .box { 
    font-size : 40px; 
  } 
} 

@media screen and (max-width : 768px) { 
  .box { 
    font-size : 30px; 
  } 
}

cssファイルの一番下に使用します.
おすすめのBreakpoint
breakpointとはmediaquery構文max-widthに置かれたブラウザ幅を指す.
1200px/992px/768px/576px
例)1200 px以下-タブレットアプリケーション設計,768 px以下-モバイルアプリケーション設計

🐣 コード#コード#

レイアウトはflexを使用して横方向に整列します.

1200 pxと768 pxをブレークポイントとし、

1200 px未満の場合、divボックスあたりの幅は50%であり、

768 px以下に書く場合、divボックスの幅は100%です.