メディアクエリによるレイアウト【Progate】

メディアクエリによるレイアウト

画面サイズごとにレイアウトを変える方法画面サイズごとにレイアウトを変え

*1

こう覚える

メディアクエリによるレイアウトの例

EX.

item {

  width: 50%;

}

@media(max-width: 670px) {
  .box {

    width: 50%

  }

]

演習問題

スライド通りに実行すれば問題なし

気をつけて！

• media、width、のスペルチェック
• セミコロン；の付け忘れ
• @media ( 　←この様に必ず半角使って括弧（を一回分開ける事

*1:画面が切り替わっても、画像サイズを調整し、見やすくする技術