Media Queriesをwordpressで使ってみた。

Media Queriesをwordpressで使ってみた。

最近「Media Queries」とよく聞くので、使ってみたくて自分とこのブログに使ってみました。
ブラウザの幅とデバイスでCSS切り替えてiphone表示用を作る。
以下、自分へのメモです。

1）Media Queriesの読み込み
header.phpに追加。

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

2）CSSで振り分け（今回はstyle.cssに記入）

/* ブラウザ幅が1024px以上 */
@media screen and (min-width: 1024px) {
     以下略
}

/* ブラウザ幅が768pxから1024pxの間。iPad表示用 */
@media screen and (min-width: 768px) and (max-width: 1024px){
     以下略
}

/* ブラウザ幅が480px以下。スマホ表示用 */
@media screen and (max-device-width: 480px) {
     img{
          max-width: 100%;
          height: auto;
          width: auto\9; /* ie8 */
     }
     以下略
}

その他）metaタグでviewport忘れずに。（header.phpに追加）
うっかりしていて、viewportのタグ入れてなかったので、しばらくの間表示で悩んでました。。

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

下記のページなどを参考にさせてもらいました。
[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル

ちなみに自分のiphone（3GS）とiPadでしか確認できてないです。Android見てない。。
まだ試行錯誤しているので、もっと良いやり方あれば都度変更していきます。