レスポンシブWeb制作時に便利なmatchMediaメソッド

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

レスポンシブWebデザインのサイトを作る場合、CSSではメディアクエリを使って幅によってレイアウトを変更するということができます。例えば、下記のような感じ。

上記は、ブラウザの表示領域の幅が600px未満なら背景を赤に、600px以上900px未満なら背景を緑に、900px以上なら背景を青にするという指定です。ブラウザの幅を変更するだけで背景色が変わります。

このメディアクエリの機能はCSSでの指定で、JavaScriptで同じことをやりたい場合、window.onresizeを使って随時幅をチェックしなきゃいけないんだろうなぁ。とずっと思っていたのですが、JavaScriptにwindow.matchMediaというメディアクエリの機能を使えるメソッドがあるということを、モダンWeb ―新しいWebプラットフォームの基盤技術という本で知りました。

例えば下記のような感じ。

実行サンプル:matchMediaのテスト

ブラウザの幅を変更するとブラウザに表示されるテキストが変更されるのが分かると思います(背景色はCSSで指定しています)。

もちろん、幅の指定だけではなく、orientationを指定すると、横長か縦長かの指定でイベントを実行することもできます。
参考:window.matchMedia – Web API インターフェイス | MDN
参考:JavaScript でメディアクエリを行う window.matchMedia の使い方 | Mozilla Developer Street (modest)

これでレスポンシブWebデザインのサイト制作時のJavaScriptの完結に記述できそうですね。
なお、一応言っておくと、matchMediaはwindowオブジェクトのメンバなので、『window.』は省略可能です。

モダンWeb ―新しいWebプラットフォームの基盤技術
モダンWeb ―新しいWebプラットフォームの基盤技術

コメントを残す

メールアドレスが公開されることはありません。