More than 3 years have passed since last update.

レスポンシブ対応する

Posted at 2019-12-13

思ったよりめちゃ簡単だった．

HTML

HTMLのヘッダーに以下を追記．

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

width=device-width

でデバイスの幅を取得する．

CSSに以下追記．
PC向けの場合

@media screen and (min-width: 767px) { /*ウィンドウ幅が767px以上の場合に適用*/
 #hoge {
   hoge: foo;
 }
}

SP向けの場合

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
 #hoge {
   hoge: foo;
 }
}