Media Queriesを使うときに参考にしたいサイト

公開：2011年03月18日 16:41
更新：2011年04月21日 01:27

CSS3のMedia Queriesを使ってみたいと思ったので、関連サイトを集めてみました。
いつもどおり有名どころが多いので見ている方も多いかもしれません。

仕様・解説など

Media Queries: W3CにあるMedia Queriesの仕様。
CSS3 Media Queries: 『Web Designer Wall』の記事。サンプル多め。
Different Stylesheets for Differently Sized Browser Windows | CSS-Tricks: 『CSS-Trick』sの記事。非対応ブラウザ用にjQueryを使ってスタイルシートを切り替える方法も紹介されている。

css3-mediaqueries.js: CSS3 Media Queries非対応ブラウザでもMedia Queriesを使えるようにするためのJavaScriptライブラリ。他のライブラリには依存していない。
Respond.js: 同じく非対応ブラウザでもMedia Queriesを使えるようにするためのJavaScriptライブラリ。他のライブラリには依存していない。
320 and up: これも単体で動く。Media Queriesを使えるようにする。機能をサポートする他のスクリプトを同梱している。機能が多いので少し容量が大きい。
Adapt.js - Adaptive CSS: 正確にはちょっと違うけど、似たような機能を提供するためのJavaScriptライブラリ。単独で動く。link要素で指定したCSSを切り替えるタイプ。960 Grid Systemの人が作ったみたい。
Media Queries / Dynamic resolution dependent layouts: 同じく非対応ブラウザでもMedia Queriesを使えるようにするためのスクリプト。こちらはjQueryプラグイン。
Window Size bookmarklet to test/debug CSS3 Media Queries: JossCrowcroft.comによるブックマークレット。現在のウィンドウサイズを表示してくれる。
Media Queries: Media Queriesを使っているサイトのまとめ。ドメイン名が素敵ｗ

英語だし長い記事ですけど、目を通しておいたほうがいいかと思います。