デバイスの幅に応じてCSSを変化させるレスポンシブウェブデザインは、CSSのメディアクエリのという仕様によって実現しています。
#css {PC向け}
@media (max-width: 1020px) and (min-width: 768px) { #css {狭いブラウザとタブレット向け} }
@media (max-width: 767px) { #css{スマホ向け} }
といった感じです。
{PC向け}のところに主だったルールを記載し、@media以下で、それぞれ対象向けにルールを微調整する、という書き方が主流かと思います。たとえば以下のようになります。
| デバイス | CSS内容 | 解説 |
| PC向け | #css {width:1000px;margin:0 auto;} | widthとmarginを指定 |
| 狭いブラウザとタブレット向け | @media (max-width: 1020px) and (min-width: 768px) { #css {width:98%;margin:0 1%;} } | PC向けのwidthとmarginを上書き |
| スマホ向け | @media (max-width: 767px) { #css{width:auto;} } | PC向けのwidthを上書きして微調整 |
2015/5/12追記）PC向けを基準とするのは、古いバージョンのIEでメディアクエリに対応していないブラウザに合わせやすいというのが大きな理由です。
レスポンシブウェブデザインの登場により、これまで、ディスプレイ解像度のシェアなどから決めていたサイトの横幅の重要度が下がりました。
PC向けの横幅はデザインの都合で決めていいかと思います。
例えば、フルHDの1,920pxと1,000pxで見栄えを変えたい場合は、最大サイズが1,920pxとなります。
特にデザイン上のこだわりがなければ、背景色が良く見えて、目で追いやすい1,000pxあたりが1つの基準になるかと思います。
まめわざのほとんどの雛形の横幅は1,000px前後です。
メディアクエリのサイズを決める場合に基準となるのは、
などがあります。
これを基準にした書き方は2通りあり、
と書いたりしますが、主流は後者かと思います。
下記のように横幅はディスプレイの実寸に合わせて変化しており、将来も様々な横幅のデバイスが登場することが予想されます。「タブレットじゃなっくなったら」という否定型の方がこれらに対応しやすいためオススメです。実際にまめわざでは後者の書き方を採用しています。
| デバイス | ブラウザの横幅(px) | ブラウザの縦幅(px) |
| iPhone5 | 320 | 568 |
| iPhone6 | 375 | 667 |
| iPhone6s | 414 | 736 |
レスポンシブウェブデザインにおいて、タブレットはPCに含むべきかスマホに含むべきかは、コンテンツによって異なるのでケースバイケースです。
しかし、タブレットはスマホに比べるとかなり一覧性が高いので、一般的にはPCレイアウトが適していると思われます。例えばPCの2列レイアウトでも問題なく見れることが多く、むしろスマホ向けの1列表示で横に長いボタンなどは冗長的に感じます。
まめわざでは、タブレットにはPC向けのレイアウトを提供しています。
PC向け～スマホの間は、タブレットやミニノート、ブラウザウィンドウが小さい場合、逆にブラウザの中身を拡大している場合、に向けたCSSを記入します。
最大が1,000pxであれば
@media only screen and (max-width: 1000px) and (min-width: 768px)
のような書き方になります。
尚、細かいことですが、ウィンドウを狭めていった際になめらかにメディアクエリを適用するには、PCのスクロールバーを加味する必要があります。
スクロールバーを20pxとして
@media only screen and (max-width: 1020px) and (min-width: 768px)
で作成すると、カクカクせずにメディアクエリが適用できます。
ただし、ウィンドウの右下を掴んでサイズを1px単位で変更することは稀ですので、この点は自己満足の範疇と言っていいかと思います。