レスポンシブデザインのcssの分岐の仕方は下のサイトが役に立った。
| 以前のWebは「PCで見る」というのが第一でありそれ以外の選択肢はありませんでしたが、最近ではスマートフォンやタブレットの登場により、ユーザーの環境も様変わり... レスポンシブの基本、メディアクエリの書き方 | それからデザイン スタッフブログ - |
ここを参考にして、CSSの中でwidthを指定する方法で切り替えを実装したんだけど、これだけでは切り替わらなかった。
これだけでなく、viewportの記載というのが必要らしい。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
これを適用したいhtmlファイルの<header>~</header>内に入れるだけでおけ。
| レスポンシブWebデザインでCSSが効かない場合に確認することをまとめました。,レスポンシブデザインでCSSが効かない場合に確認すること。 レスポンシブデザインでCSSが効かない場合に確認すること - |