Media Queriesの使い方とスマートデバイスの画面サイズ
両方とも並行して使うのに別々の記事になってることが多いので（両方共それだけで数十KBのテキストを書くことができるので当たり前といえば当たり前）、まとめておきます。
Media Queriesの概要とか
簡単なつかい方
@media screen and (max-width:640px) { /*幅640pxまでのスクリーンに適用されるスタイル*/ }
ほんの少しだけ詳しい説明
様々な画面サイズに対応する方法はいくつかあるのですが、Media Queryはそのひとつです。上のように画面サイズやデバイスのタイプに応じて、特定のスタイルを適用したりしなかったりできます。
利点と欠点
Media Queriesを使う場合と、モバイル用ページを用意するのとで比較してみました。
Media Queriesの特徴
- 利点
- HTMLを使いまわせる
- PCで画面幅を狭くしても綺麗に表示される
- 欠点
- ページサイズが増える
- レイアウトに制約がつく
デバイス別ページの特徴
- 利点
- ページ構造を最適化できる
- サイト構成も別にすることができる
- 欠点
- ページが増えるぶん開発コストがかかる
- リダイレクトや振り分けなどでサーバー側が大変
