既存サイトのレスポンシブデザイン対応にあたってのメモ

レスポンシブデザインが主流になりつつあるが、既存の非レスポンシブなサイトのレスポンシブ対応というものに初めてトライしてみた。

今回はWordPressではなく普通の静的なhtmlサイト。

細かい点は割愛するが、ポイントとなる箇所を忘れないようメモ。

・モバイル用のcssを用意し、iPadからモバイルとするなら

@media only screen and (max-width : 1024px){}

iPadまではPC扱いするなら

@media only screen and (max-width : 1023px){}

などとして{}内にモバイル用のstyleを記述
・headタグ内に

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

を追加
・メインコンテンツやサイドバー部分のfloatを解除
・横幅をピクセル指定ではなくパーセンテージ指定に
・グローバルメニュー部分は、好みによるが、典型的なのはJQueryとcssでタップした時にプルダウンが出てくるスタイルとする（ソースは探せばいくらでも見つかる）

元のサイトのソースがきれいに書かれていればあっさりと対応可能。
次回は、お気に入りのWPのテーマでレスポンシブ対応していないがPC向けデザインが好きなものがあるので、それの対応をしてみよう。