以下の内容はすでに古いものとなっています。
新しい設定はこちらをご参照ください。

昨今のWEB制作ではスマホ対応が必須、、、と言うよりスマホがメインで、PC対応はおまけのような状況ができつつあります。
しかしサイトのコンテンツにもよりますが、PCで対応なしでいいということにはまだなってませんね。
企業サイトなどはやはりPCで閲覧される機会も多いですし、PCサイトをきっちり作り込んで企業としての体裁をアピールする必要はまだまだあります。

しかし制作する側としては、スマホ・PCサイトをきっちり作り込んで両対応はなかなか大変！

ユーザーエージェントで切り替えるスクリプトなど優れた解決方法がありますが、
同じデバイス・ブラウザでも横置きにしたらどうなるの？とか、タブレットのときはPC画面のほうが見やすいよね？　とか細かく対応することになってきます。
それで色々試行錯誤していたところ、CSS3のメディアクエリでスタイルを変える方法が、楽だし柔軟でいいんじゃないかと思ったのでここにメモします。

書き方は簡単。
スタイルシートに以下のうように書きます。

/*======画面サイズ414px以下（スマートフォン）======*/
@media screen and (max-device-width: 414px){
.container {
width:100%;/*ここにスマホ用のスタイルを記述します*/
}
}
/*======画面サイズ415px以上（タブレット・PC）======*/
@media screen and (min-device-width: 415px){
.container {
width:1020px;/*ここにPC用のスタイルを記述します*/
}
}

ぐぐってみるとメディアクエリに関していろいろな情報が出てきますので、そちらを参照していただきたいのですが（ぉぃ
私の工夫はメディアを”max-device-width”にして415pxで切り替えるようにしたところ。
これでiPhone7plusサイズまでのスタイルと、それ以上の画面サイズでのスタイルで切り替えられます。
iPhone7plusまでのデバイスはモバイル用スタイルで、それ以上のサイズのデバイスはPC用スタイルでいいんじゃないかな、と思うのです。
（私の環境では他のスタイルの影響や、プラグインもありますので、必ずしも他の環境ではうまくいかないかも。その際は414pxとか415pxのところを変更していいサイズを見つけてみてください。）

メディアクエリを使うと画面サイズで細かくスタイルを適用できますし、将来的なデバイスの解像度の進化などにも対応しやすいんじゃないかなと思います。