【ブログ】サイトをレスポンシブ化したらタブレットの解像度で悩んだ

freo
[PR]

15年前のhtmlを再利用してみる

メモ代わりに設定を記録しておきます。

もはや、レスポンシブ化していないサイトはGoogleからも避けられる時代のようです。
勉強を兼ねて、既存のサイトをフルスクラッチしてみました。 html、CSS、PHP、Javascriptまですべて手打ちです。

PHPで静的サイトをつくる

[PR]

レスポンシブ化で悩む

レスポンシブ化するにあたって悩んだのがブラウザの解像度。
googleAnaliticsでアクセスの傾向を確認すしてみたけど、ブラザの種類が多すぎる。
iphoneとipadからのアクセスが多いけど、Appleの製品を持ち合わせていないので確認不能。
chrome ブラウザの機能でシュミュレーションできるけど、実機との違和感が拭えない。

[PR]

ブレイクポイントを仮設定する

深く考えてもしょうがないので、なんとなくブレイクポイントを次のように設定してみた。

  • スマートフォン→480px →@media (min-width: 480px)
  • タブレット→960px →@media (min-width: 481px) and (max-width: 960px)? {

普段使っているスマホとタブレットはこれでOK。
FireFox、chromeでのシュミュレーションではうまくいっていますが、やっぱり実機確認は大切ですね。

(Visited 10 times, 2 visits today)

コメント

タイトルとURLをコピーしました