PC・スマホでMedia Queriesを使って個別にCSSを読み込ませる方法(IE対策済み)

ie

最近はレスポンシブ対応のサイトが普通になりつつありますがそんなレスポンシブサイトを制作するためには必須なのがディスプレイの横幅でレイアウトを変更することができるMedia Queriesを使う方法です。

Media Typeとは?

Media Queriesとは Media Type の拡張です。
head内のmetaタグに書くmedia=”screen” や media=”print”などがMedia Typeです。

<link rel="stylesheet" href='style.css' type="text/css" media="screen" />

ただMedia QueriesはIE8以下はサポートしていないのでcss3-mediaqueries.jsなどを追記する必要がありますが効かなかった場合、以下のようにCSSを読み込ませます。

まずはPCとスマホを判別し、その後に条件分岐でIE6~8に対応したスタイルシートを読み込ませるようにしました。

<!-- スマホ用 横幅が最大○○まではsmartphone.cssを読み込む -->
<link rel="stylesheet" media="screen and (max-device-width: ○○px)" href="css/smartphone.css" />
<!-- PC用 横幅が最低○○からはcss.cssを読み込む -->
<link rel="stylesheet" media="screen and (min-device-width: ○○px)" href="css/css.css" />

通常、Media QueriesはIE8以下では効かないための対処。

<!-- IE6~8用はcss.cssを読み込む -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/css.css" />
<![endif]-->

おすすめ記事

  • Pocket
  • LINEで送る
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

楽天ショップのリンク付きの縦バナーを設置する方法
Web制作者に必須のFTPクライアントソフト!FileZillaのメリットとは?
Sublime Text 2で自動補完してさらさら~っとHTMLやCSSを記述する方法
これだけあればOK! WEB制作で必須の簡単なURLを入れるだけでダミー画像が作れるWebサービス3選
Webサイトを制作したらしておくべきチェックリスト
[IE対策]IEでfade効果などをさせた場合のPNG画像が透過されない(黒くなる)時の対処法
Web制作にルーチンワークに便利!Googleスプレッドシートを利用した簡単html生成法
WordPressをインストールしたディレクトリと同じ階層にindex.htmlがある時の開発準備TIPS
最近残りやすくなったな~って感じるWEB製作者の皆様!Clear Cashがめっちゃ便利と強く言いたい!
IE7でdisplay:inline-blockを適用させる方法
IEチェックでの修正に必須!IEの条件分岐&IE7やIE8などのCSSハック一覧をまとめてみました。
Web制作のグラデーションに便利なCSS3ジェネレーターまとめ ※随時更新
プレビューを見ながら簡単にスタイリッシュなグラデーションを作成できるCSS3ジェネレーター「Ultimate CSS Gradient Generator」
IE8以下でCSSで背景を指定したのに全く表示されない時にチェックしておきたいポイント
GitHubGistでWhoops.と表示された時の対処法

Menu

HOME

 TOP