レスポンシブなサイトを作り始める前に考慮すべきこと

三行でまとめると

• Media Queriesは便利だけど、全然銀の弾丸じゃない
• かといって使い物にならないかというとそうでもない
• 下記各手段のメリットデメリットをふまえ、モジュールごとに最適な手段を採用する必要がある

Media Queries

固定幅のサイト制作と違ってくること

• Bodyの幅を常に画面幅に追随させないといけない
  • 言い換えるとすべての要素は320px程度まで横幅が縮まっても、正常に表示される手段を提供しなければならない
  • 古いブラウザのことも考慮すると、それだけでも大変

この手段自体「モバイル」とは根本的に無関係

• Media Queriesはあくまで幅に対してどう表示するかの選択
• つまりモバイルでも横長のものがあれば"デスクトップ版"が表示されることになる
• 逆も然り

要素自体が変わるものはMedia Queriesの得意分野ではない

• とはいえ致し方なく変わる場合は下記いずれかの対応が必要になる:
  • サーバーサイドでモバイル出し分け
  • モジュールごとMedia Queriesでわける

サーバーサイドでモバイル出し分け

• 静的サイトとして配信できなくなる
• モバイル出し分けをしても、依然として"デスクトップ版"のモジュールは320px程度まで縮んでも正常に表示される必要がある
  • デスクトップで開いてブラウザ幅を縮められる可能性があるので
• ^の要件を満たす必要があるので「サーバーサイドでモバイル出し分け」は位置付けとしてEnhanment

モジュールごとMedia Queriesでわける

• 余計な要素をブラウザ側に配信することになり、処理に時間がかかる
• ただ「サーバーサイドでモバイル出し分け」を行うのと違い、"デスクトップ版"のモジュールが縮んだ時の考慮をしなくて良くなる
• 静的サイトとして配信できるし、工数としても「サーバーサイドでモバイル出し分け」を行うのより少なく済む