*

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見てない。。
まだ試行錯誤しているので、もっと良いやり方あれば都度変更していきます。

 -Web

Sponsored link

Sponsored link

  関連記事

モバイル用(ブログじゃない方。未確認だけど)

ということで、すっかり忘れてたのでモバイル用も一応作ってみとく。 でも今iPhoneなので、確認する術がなかったり。。

フォームのinput(radiobutton・checkbox)とテキストの位置を調整する

今年も私のメモは細かいです。 やったことあるのに、細かすぎてメモしてないから忘れてます。。 いい加減どこかに残しておきま

no image

30代なんで

何度見てもイラストが怖いAGA 30代の悩める気持ち なんのためのサイトかよくわからないが、とりあえずスクリーンセーバー

ロリポップのプラン名が「チカッパ」から「スタンダード」に変わってた

今日ふらっとサーバーの契約状況を確認したら、いつの間にやらロリポのプラン名が変更されてました。 どうやら変更したばっかり

no image

li要素内のa要素にdisplay:block指定で余白ができる

li要素内のa要素にdisplay:block指定で余白ができる こちら参照 http://shigexworks.sa

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

共働きの30代女性。
福岡でWebに携わってます。
主に自分用の細かいメモを書いてます。
細かい内容が多いですが、他の方にも役立つなら幸いです。

ブログの記事を紹介していただきました

このブログ更新するの、約1年ぶりか(汗) すごいお久しぶりです。 このブログを始めてもう地味に10年くらい経つのですが(

確定拠出年金、退職したときに行う手続き(継続するor掛金停止する)

私、昨年から確定拠出年金をしております。 会社には確定拠出年金の制度がなかったので、「個人型年金」の加入者として掛金の拠

実は先月で退職しました

だいぶブログさぼっておりましたが、実は先月末で会社を退職しました。 別にこの歳になって、自主退職したわけじゃないのです。

  • ブログランキング・にほんブログ村へ