「css3-mediaqueries-js」と「Respond.js」の違い

レスポンシブ ＞ レスポンシブ画像

　状態:- 　閲覧数:5,865 　投稿日:2012-02-09 　更新日:2013-04-03
「css3-mediaqueries-js」と「Respond.js」の違いについて調べたけどよく分からなかったので、自分の環境で試した結果についてメモ

「css3-mediaqueries-js」… IE9レスポンシブ対応
「Respond.js」… IE8/9レスポンシブ対応

結論


IE9だけレスポンシブ対応するなら「css3-mediaqueries-js」。IE9＋IE8以下もレスポンシブ対応にするなら「Respond.js」
ちなみに、両方設置すると、IE8/9何れでも反映される
※コードを確認したわけではなく、あくまでも自分の環境で試した結果に基づく
※「Respond.js」は、IE9記載こそないが、GitHubには以下の記載もある
CSS3 Media Queries (for IE 6-8, and more)

■「css3-mediaqueries-js」公式ページ
css3-mediaqueries-js - css3-mediaqueries.js: make CSS3 Media Queries work in all browsers (JavaScript library) - Google Project Hosting

■「Respond.js」公式ページ
scottjehl/Respond - GitHub


ところで、速度的にどうなのよ？ とか、
そもそも、メディアクエリでレスポンスして何が楽しいの？ ユーザーエージェントでちゃんと振り分けようよ、とか
その辺りは、未考慮……

いずれにしても、やってて思ったのは、こんなのIE6スターハックみたいな、ホントに一時しのぎの技だと思われ。
調べれば調べるほど頭こんがらがってくるし、
ましてや、調べた…、いや、もう終了ー

P.S.
23:43 上記とは別のデザインのレスポンシブサイトを、IE8で見たら、どちらを使っても、また両方併用しても、正常に機能しなかった。
＜結論＞IE8だと、レスポンシブがうまくいかないときがある。そんなときは、大人しく諦めよう……

CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない

画面幅に応じて取得ディレクトリパスを変更したい



類似度ページランキング
順位 ページタイトル抜粋 ％
1 「css3-mediaqueries-js」と「Respond.js」の違い 63
2 「PhotoShop CS3」　と、「Vieas」　の違い 39
3 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 36
4 Bookmarks clean up 36
5 「Invalid property value.」遭遇事例一覧 35
6 spacer.gif 33
7 画像を保存させないようにするjQueryプラグイン「jquery.dwImageProtector.js」 33
8 「Aptana Studio 3.0.8」を使ってみた感想 33
9 「bgcolor」「background-color」「background」の違い 33
10 「Bootstrap, from Twitter 2」で、「Dropdowns bootstrap-dropdown.js」が動作しないときの対応案 32
11 「:first-child」が効かない場合は「:first-of-type」 32
12 ページで使用されている「id名」「class名」をChromeで取得したい 　 31
13 「Bootstrap v2.3.1」不具合 31
14 HTML5で、set_include_pathを用いると、先頭に謎の空白行ができる 30
15 Responsive Glid 30
16 invalid property value css background-color 30
17 「SRWare Iron」を検討 30
18 「max-width:100%;」と「width : 100%;」の違い 29
19 Illustrator CS3でのJavaScript実行方法 29
20 要素の alt 属性 と、
要素の違い
 29
2026/6/01 11:56 更新
週間人気ページランキング ／ 5-25 → 5-31
順位 ページタイトル抜粋 アクセス数
1 RGBの種類 ／ ビットカラー | RGB(色) 4
1 鉄道会社毎のカラーコード | カラーコード(色) 4
2 RGB最大値基準 3
2 RGB → HSL | 色変換(色) 3
2 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
2 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 3
3 HTML5で画像ファイル存在判定 | HTML5(HTML) 2
3 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 2
3 今後について 2
3 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 2
3 RGB → HSL 彩度S 計算方式の違い 2
3 HSL → RGB 計算例 Wikipedia ／ HSL 206.6, 89.7, 54.1 → RGB 33, 150, 243 2
3 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 2
3 考え方A.長さの比率で角度６０°を分割 ／ R≧B≧G 2
3 RGB → 色相H … 最大値基準 × 図形 の考え方 | 色変換(色) 2
3 方式1.色相H0°～360°、輝度L0～100(固定) 2
3 方式1.色相H0°～360°、彩度S0%～100%または0～255、明度V0%～100%または0～255 2
3 カラーコード → RGB ／ 16進数 → 10進数 2
3 RGB → HSL 計算例 最小値基準 ／ RGB 33, 150, 243 → HSL 206.6°, 89.7％, 54.1％ 2
3 font-size | フォント 2
2026/6/1 5:05 更新