【コピペ用】レスポンシブに使うときのCSSメモ書き（Media Queries）

今はなんといってもレスポンシブwebデザインでしょ！
スマホ用、タブレット用など画面幅に応じて対応できるCSSの分岐です。
Media Queriesっていうやつです。
うろ覚えですぐ忘れるのでコピペ用に保存しておいておこう。
作るときこの参考になるメモ書きがないとちょっと不安ですので。

そして、これをワードプレスのテンプレに反映すれば、
今っぽいレスポンシブwebデザインというのができるのだ！

非常に重要なのでコピペ用としてまとめておきます。
毎回これを見ながらサクサク作っちゃおう！

必要な分岐だけ使えばいいだろう。

なんといってもスマホの勢いは年々増すばかり。
iphoneやandroidのスマートフォンや、ipadなどのタブレットとか。
いろいろ対応できますね。

スマートフォン（縦長・横長）の場合

@media only screen and (min-device-width : 320px)
and (max-device-width : 480px) {
/* ここにスタイルが入ります */
}

スマートフォン（横長）の場合

@media only screen and (min-width : 321px) {
/* ここにスタイルが入ります */
}

スマートフォン（縦長）の場合

@media only screen and (max-width : 320px) {
/* ここにスタイルが入ります */
}

iPad（縦長・横長）の場合

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* ここにスタイルが入ります */
}

iPad（縦長）の場合

@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and
(orientation : portrait) {
/* ここにスタイルが入ります */
}

デスクトップのブラウザ用（横長）の場合

@media only screen and (min-width : 1224px) {
/* ここにスタイルが入ります */
}

大きいモニター用の場合

@media only screen and (min-width : 1824px) {
/* ここにスタイルが入ります */
}

iPhone4などの高解像度用の場合

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* ここにスタイルが入ります */
}

レスポンシブ対応できるjqueryプラグイン

こんなものがあったので、ついでに書いておきました。
jqueryでもできるので、一度挑戦してみるとしよう。

【ダウンロード】elclanrs / jquery.columns

【デモサイト】elclanrs / jquery.columns

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.columns.js"></script>
<link rel="stylesheet" href="jquery.columns.css" type="text/css" />