0

IE8以下でメディアクエリが効かないとき…

IE8以下でメディアクエリが効かないとき...

レスポンシブデザインを制作する際に「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属性で指定する

(2).@mediaで指定する

(3).@importで指定する

 

■ IE8以下への対応

通常、Media QueriesをIE8以下で使用するためには「css3-mediaqueries.js」を読み込んで対応します。ここではついでに、HTML5用の「html5.js」も併せて読み込んでおきます。

 

これで、ひとまず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){…}というように省略しないできちんと記述するようにします。

css3-mediaqueries1




コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > IE8以下でメディアクエリが効かないとき…