15年前のhtmlを再利用してみる
メモ代わりに設定を記録しておきます。
もはや、レスポンシブ化していないサイトはGoogleからも避けられる時代のようです。
勉強を兼ねて、既存のサイトをフルスクラッチしてみました。 html、CSS、PHP、Javascriptまですべて手打ちです。
レスポンシブ化で悩む
レスポンシブ化するにあたって悩んだのがブラウザの解像度。
googleAnaliticsでアクセスの傾向を確認すしてみたけど、ブラザの種類が多すぎる。
iphoneとipadからのアクセスが多いけど、Appleの製品を持ち合わせていないので確認不能。
chrome ブラウザの機能でシュミュレーションできるけど、実機との違和感が拭えない。
ブレイクポイントを仮設定する
深く考えてもしょうがないので、なんとなくブレイクポイントを次のように設定してみた。
- スマートフォン→480px →@media (min-width: 480px)
- タブレット→960px →@media (min-width: 481px) and (max-width: 960px)? {
普段使っているスマホとタブレットはこれでOK。
FireFox、chromeでのシュミュレーションではうまくいっていますが、やっぱり実機確認は大切ですね。
コメント