レスポンシブデザインを制作する際に「Media Queries（メディアクエリ）」を使用してCSSの表示を切り替えますが、IE8以下ではこの「Media Queries」に標準対応していません。そこで「css3-mediaqueries.js」等を読み込むことで対応させたりしますが、それでもこのMedia Queriesが効かないということがあります。そこで、確実にMedia Queriesを使ってcssを読み込む方法をまとめておきます。
Media Queriesを使用してcssを読み込む3つの方法
まずは、Media Queriesを利用してCSSを切り替える際の方法には3つあります。
(1).Linkタグのmedia属性で指定する
|
1 2 3 |
<link rel="stylesheet" media="screen and (min-device-width: 781px)" href="pc.css" /> <link rel="stylesheet" media="screen and (min-device-width: 481px)" href="tablet.css" /> <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="mobile.css" /> |
(2).@mediaで指定する
|
1 2 3 4 5 6 7 8 9 |
@media screen and (max-width: 480px){ /* mobile用のスタイルを記述 */ } @media screen and (min-width: 481px){ /* tablet用のスタイルを記述 */ } @media screen and (min-width: 781px){ /* pc用のスタイルを記述 */ } |
(3).@importで指定する
|
1 2 3 |
@import url('pc.css') screen and (min-width: 781px); @import url('tablet.css') screen and (min-width: 481px); @import url('mobile.css') screen and (max-width: 480px); |
■ IE8以下への対応
通常、Media QueriesをIE8以下で使用するためには「css3-mediaqueries.js」を読み込んで対応します。ここではついでに、HTML5用の「html5.js」も併せて読み込んでおきます。
|
1 2 3 4 |
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> |
これで、ひとまずIE8以下でも「Media Queries」を利用できるようになりますが、cssの読み込み方によっては効かない場合があります。それは先ほどの(1)(3)の指定方法で(1)のlink要素のmedia属性で指定する方法と、(3)の@importで指定です。「css3-mediaqueries.js」を使う場合は(2)の@mediaで指定する方法でないと効かないようです。
さらに気をつけなければいけない点は、@media…以下を正しく記述しなければいけません。通常@media(max-width: 480px){…}というように、省略して記載してもきちんと判断してくれますが、「css3-mediaqueries.js」を使う場合は、media typeを省略してしまうと無視されてしまいます。なので@media screen and(max-width: 480px){…}というように省略しないできちんと記述するようにします。
