個人用の js/jquery デバッグ ツールを作成しています。css メディア スクリーン クエリを微調整するのは面倒です。そこで、ウィンドウのサイズ変更時にトリガーされたメディア css ルールを表示するというアイデアを思いつきました。したがって、css メディア スクリーン ルールが開始されたときにイベントをキャッチできるかどうかを知る必要があります。
注: css ファイルを簡単に読み取って変数に入れ、すべてのメディア クエリをフィルター処理して、画面の値を現在のウィンドウ サイズと比較することができました。これは機能しますが、すべての css ファイル (およびスタイル タグ) を処理する必要があるため、効率的ではないように感じます。他のオプションはありますか？
firefox の開発ページで何かを見つけました。メディアクエリが起動 (および起動) したときにイベントを取得することができます。かなり実験的ですが、うまくいきます。
また、スタイル シートからメディア クエリを除外するために正規表現を使用する必要もありません。これは、js を使用してドキュメント スタイル シートにアクセスし (シートを再度ロード/ajax する必要はありません)、CSSrule オブジェクト名を確認することで実行できます。css メディア クエリ ルールには、通常の css スタイル ルールとは別のオブジェクト名があるようです。この興味深い記事を読むことをお勧めします。そこですべて説明されています。
Firefox 開発ページ:
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList
MediaQueryList オブジェクトは、ドキュメントのメディア クエリのリストを維持し、ドキュメントのメディア クエリが変更されたときのリスナーへの通知の送信を処理します。
これにより、ドキュメントのメディア クエリの値の変更をプログラムで検出する必要がある場合に、値を定期的にポーリングする代わりに、メディア クエリの変更を検出するためにドキュメントを監視できます。
公式仕様:
http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface
別の (編集: VERY ) 興味深い記事がここにあります。
http://tylergaw.com/articles/reacting-to-media-queries-in-javascript
私がやりたいことの実例はここにあります!!
http://tylergaw.github.io/media-query-events/
別の興味深いプロジェクト！