デバイスの解像度によるCSSの振り分け
Media Queriesを利用

Media Queries

ディスプレイの大きさはまちまち
1500px、1200px、992px、970px、940px、768px、735px、695px、640px、480px、320px…（アンドロイド、ガラケーも入れるともっと）
どのサイズを境にレイアウトを切り替えるかはさまざま。


※おおまかに3つに分ける

1.スマフォ、ガラケーなど　
2.ipadやタブレット　
3.PC向け　

 

<head>内にこんな記述をみつけることがある。

<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >　　1. スマフォ、ガラケーなど

<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >　　2. ipadやタブレット

<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >　　3. PC向け

場合によってはこれ　<link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/>

 

Max Width : 320px（ビューエリア320px以下という意味）
Min Width : 320px（ビューエリア320px以上という意味）
Max Device Width : 320px（デバイスサイズ320px以下という意味）
Min Device Width : 320px（デバイスサイズ320px以上という意味）

1. は320px以下のディスプレイ対象（スマフォ、ガラケーなど）
2. は321px以上910px以内のディスプレイ対象（ipadやタブレット）
3. は910px以上のディスプレイ対象（PC向け）


※例えば1.の場合/CSSにインラインとしてこういう風に記述出来る。
1枚のcssの中に赤字の部分を記述

div { height: 25px; } /* pc CSS */
@media screen and (max-width: 320px) {div { height: 15px; } } /* スマートフォン、普通のケイタイ CSS */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { div { height: 18px; } } /* iPad CSS */


Viewportの指定（meta）

Media Queriesを正しく機能させるにはViewportの指定が必要。
Viewport指定は、画面サイズを特定のサイズに限定しすぎると、おかしなことになってしまうので、
ある程度汎用的に利用できる書き方にしておく。


※<meta>には、このようなものを書く - サンプル。

<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=1024" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />
など


IEの対応

Media Queriesは、CSS3の機能であり、古いIE6～8には非対応。そこでjQuery Media Query Pluginを利用する。
IE9以下で利用する場合はIE Conditional Commentsを利用すると便利。


＜私感＞実際に使ってみて、Media Queriesでの振り分けは完全な方法ではないが、
作業時間、工数、費用…などさまざまな制約の中で最小限の労力でできる工夫の一つではあると思った。

参考サイト

デバイスに合わせてCSSを振り分ける「Media Queries」
http://dev.classmethod.jp/smartphone/device-media-queries/

プラグインなしでiPhoneとiPadにサイトを最適化する簡単な方法
http://snippet-editor.com/2010/09/optimised-for-ios-deveices-without-plugin.html

レスポンシブ・ウェブデザインの功罪とモバイルファースト
http://web-tan.forum.impressrd.jp/e/2012/01/10/11911

レスポンシブwebデザインで制作する時のポイント
http://design-spice.com/2011/09/22/responsive-web-desig/

レスポンシブWebデザインの作り方（簡単設定方法）
http://helmetz.net/webdesign/web/responsivewebdesign.html

.........参考にさせていただいた皆様ありがとうございました。