jsでメディアクエリ制御したい時はwindow.matchMediaがいいみたい - Qiita
CSSでのメディアクエリ制御@media (max-width: 768px)〜みたいなのには慣れているけどjsで制御する時にinnerWidthの幅を取得して〜resizeイベントで幅を比べて〜resizeイベントが発火しまくるのを防ぐためにsetTimeoutで間引いて〜とかやったりしててわーーっとなってた人はwindow.matchMedia使うといいよっていうメモです。 window.matchMediaの使い方 window.matchMedia DEMO $(function() { var mq = window.matchMedia('(max-width: 768px)');// 横幅768px以下の時 function checkBreakPoint(mq) { if (mq.matches) { $('.menu').text('SPです'); $('.menu').
知ってた？JavaScriptでメディアクエリを利用するちょっとしたテクニック
Web制作ですっかり定番となったメディアクエリを使ったレスポンシブ Webデザイン。JavaScriptで実装している機能をメディアクエリと連携させるためのちょっとしたテクニックを紹介します。 テーブルタグがCSSに変わり、レスポンシブデザインは心躍るコンセプトの1つです。レスポンシブデザインはメディアクエリで閲覧中の機器の画面幅、高さ、向き、解像度、アスペクト比、色深度などを把握し、応じたスタイルシートを適用しています。 以下の例はcssbasic.cssをすべてのデバイスに適用して、水平方向の画面幅が500ピクセル以上なら、csswide.cssも適応します。 <link rel="stylesheet" media="all" href="cssbasic.css" /> <link rel="stylesheet" media="(min-width: 500px)" href="
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
