カテゴリー別アーカイブ: メディアクエリ

メインサイトのリニューアル

自分のメインサイトのリニューアルが一応完了しました.

今風の, レスポンシブ・フラットデザインでリニューアルしました.

CSS3を駆使して, Designing in the browserのワークフローも実践してみました.

JavaScriptからメディアクエリを判定する

windowオブジェクトのmatchMediaメソッドを利用する. このメソッドはMediaQueryListオブジェクトを返す. このオブジェクトには, matchesというプロパティがあり, それを判定する

if (window.matchMedia('(min-width: 1024px)').matches) {
    //do something ...
}

また, MediaQueryListオブジェクトにはイベントリスナを設定したり, 削除したいすることが可能.

window.matchMedia('(min-width: 1024px)').addListener(function(){
    //対応するメディアクエリが有効になったときに実行される
});

メディアクエリに合致すればリスナに設定した処理が実行される.

レスポンシブデザインには利用場面が多いでしょう.