*

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

  関連記事

no image

evernoteの改行削除なおったんすか?

世間的に大絶賛の「EVERNOTE」。 EVERNOTE 自分一度使ってみたけどすぐ使わなくなりました。 なんでかいうと

CSSでborderにグラデーションを使って、よくある見出しを作る

borderにグラーデーションって、あまり使い勝手がない気もしますが、たまたま見出しとかに使ってみる機会があったのでやっ

基本にかえってバリデートチェックをしてくれるwebサービス

とりあえず、バリデートチェックとは? バリデートチェック: HTMLやCSSが正しく書かれているかチェックする HTML

no image

家計簿アプリ

家計簿アプリ、しばらく自前のgoogleのspreadseat使ってたんだけど、今日からiXpenseltの無料版使って

お仕事で使えるフリーで商用利用可の写真素材とアイコン素材のサイト

あんまりやらない素材集の紹介です。 10年前くらい(゜゜)…って、まだ写真素材とかも割りと海外のフリーのものを頑張って探

コメントを残す

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


*

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

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

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

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

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

実は先月で退職しました

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

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