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

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

　状態:- 　閲覧数:5,952 　投稿日: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/10/09 9:37 更新
週間人気ページランキング ／ 10-2 → 10-8
順位 ページタイトル抜粋 アクセス数
1 Design 0 11
2 RGB → 色相H 方式の違い | 色変換(色) 4
3 GIMP | GIMP 系(ソフトウェア) 3
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 2
4 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 2
4 「bgcolor」「background-color」「background」の違い | CSS 2
4 RGBの種類 ／ ビットカラー | RGB(色) 2
4 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; | CSS 2
4 ログイン 2
4 UI カテゴリー 2
4 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 2
4 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 2
4 いい感じのGIFアニメーションを探してみる … 国内 2
5 Illustratorで、アートボードの大きさではなく選択範囲の大きさで出力 ／ 「トリムエリアツール」→「トリムエリアを選択したアートに合わせる」 | Illustrator CS3(Illustrator) 1
5 margin相殺 ／ 水平方向では発生しない。「position:absolute;」「position:fixed;」指定した要素では全く発生しない | CSS 1
5 このエントリーの結論 ／ このエントリーの 3 行まとめ ／ 特定のChrome バージョンが原因を思われる理由で、一時的に期待通り動作しなくなった拡張機能 1
5 「兄弟要素の兄要素を選択するCSSセレクタ」は存在しない | CSSセレクタ(CSS) 1
5 数値データ型(CSS) カテゴリー 1
5 Chromeブラウザは、ユーザーという単位で情報管理している ／ Chromeブラウザには3つのモードがある ／ ログイン状態の動作確認を行う場合は、通常モードで行う 1
5 色相H 1
2026/10/9 5:05 更新