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

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

　状態:- 　閲覧数:5,909 　投稿日: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/8/10 9:38 更新
週間人気ページランキング ／ 8-3 → 8-9
順位 ページタイトル抜粋 アクセス数
1 Design 0 10
2 鉄道会社毎のカラーコード | カラーコード(色) 7
3 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 3
4 SeaMonkey 2.7.2 2
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 2
4 PNG | 画像 2
4 Sleipnir | ブラウザ 2
4 既存画像を手動補正 2
4 Chrome コンソール画面で CSSの:hover 適用スタイルを確認 | Google Chrome(ブラウザ) 2
4 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 2
4 「OOCSS」とは別の考え方？ | 命名規則(コーディングルール) 2
4 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる | CSS 2
4 img srcタグで、画像の上に文字 | 色 2
4 CSSトラブル対応(CSS) カテゴリー 2
5 「Create Link」代替拡張機能を探した結果は、「CopyTabTitleUrl」でした。 | CopyTabTitleUrl(Chrome 拡張機能) 1
5 Firefox5.0 ／ ブラウザ関連メモ | Firefox(ブラウザ) 1
5 Bookmarks clean up | Chrome 拡張機能 1
5 エラー：Google chrome で問題が発生しました。今すぐ再起動しますか？ | Google Chrome(ブラウザ) 1
5 インストール ／ MediBang Paint Pro チュートリアル ／ 実際に起動してみて気が付いたこと 1
5 HSL → RGB 計算方式の違い | 色変換(色) 1
2026/8/10 5:05 更新