レスポンシブWebデザインのサイトを作る場合、CSSではメディアクエリを使って幅によってレイアウトを変更するということができます。例えば、下記のような感じ。
@media screen and (max-width: 600px) {
body{
background-color:red;
}
}
@media screen and (min-width: 600px) and (max-width: 900px){
body{
background-color:green;
}
}
@media screen and (min-width: 900px){
body{
background-color:blue;
}
}
上記は、ブラウザの表示領域の幅が600px未満なら背景を赤に、600px以上900px未満なら背景を緑に、900px以上なら背景を青にするという指定です。ブラウザの幅を変更するだけで背景色が変わります。
このメディアクエリの機能はCSSでの指定で、JavaScriptで同じことをやりたい場合、window.onresizeを使って随時幅をチェックしなきゃいけないんだろうなぁ。とずっと思っていたのですが、JavaScriptにwindow.matchMediaというメディアクエリの機能を使えるメソッドがあるということを、モダンWeb ―新しいWebプラットフォームの基盤技術という本で知りました。
例えば下記のような感じ。
var minMQ = window.matchMedia('screen and (max-width: 600px)');
var stdMQ = window.matchMedia('screen and (min-width: 600px) and (max-width: 900px)');
var maxMQ = window.matchMedia('screen and (min-width: 900px)');
var paraDom = document.getElementById('para');
// メディアクエリにマッチした場合のイベントリスナ
function onMatchMedia(mq){
if(!mq.matches) return; // イベントリスナで実行された場合は、必ずtrueだが、関数を直接呼ぶとfalseになるので、ここで返す
var infoTxt = mq.media + "<br>";
switch(mq){
case minMQ: // 'screen and (max-width: 600px)'の場合
console.log("minMqMatch");
infoTxt += "600未満<br>";
break;
case stdMQ: // 'screen and (min-width: 600px) and (max-width: 900px)'の場合
console.log("stdMqMatch");
infoTxt += "600以上900未満<br>";
break;
case maxMQ: // 'screen and (min-width: 900px)'の場合
console.log("maxMqMatch");
infoTxt += "900以上<br>";
break;
}
infoTxt += "イベント発生時の幅：" + document.documentElement.clientWidth + "px";
paraDom.innerHTML = infoTxt;
}
minMQ.addListener(onMatchMedia);
stdMQ.addListener(onMatchMedia);
maxMQ.addListener(onMatchMedia);
// 起動時はイベントリスナが発生しないので、直接呼ぶ
onMatchMedia(minMQ);
onMatchMedia(stdMQ);
onMatchMedia(maxMQ);
実行サンプル：matchMediaのテスト
ブラウザの幅を変更するとブラウザに表示されるテキストが変更されるのが分かると思います(背景色はCSSで指定しています)。
もちろん、幅の指定だけではなく、orientationを指定すると、横長か縦長かの指定でイベントを実行することもできます。
参考：window.matchMedia – Web API インターフェイス | MDN
参考：JavaScript でメディアクエリを行う window.matchMedia の使い方 | Mozilla Developer Street (modest)
これでレスポンシブWebデザインのサイト制作時のJavaScriptの完結に記述できそうですね。
なお、一応言っておくと、matchMediaはwindowオブジェクトのメンバなので、『window.』は省略可能です。
コメント