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

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

　状態:- 　閲覧数:5,422 　投稿日: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
2025/5/16 15:50 更新
週間人気ページランキング ／ 5-9 → 5-15
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 18
2 鉄道会社毎のカラーコード | カラーコード(色) 12
3 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 11
4 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 8
5 RGB ⇔ Lab | 色変換(色) 5
5 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
6 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 4
6 RGBの種類 ／ ビットカラー | RGB(色) 4
6 Chromeで(TikTokなど)特定Webサイトの音を消すには、該当タブを右クリック後、「サイトをミュート」をクリックします。 | Google Chrome(ブラウザ) 4
7 Design 0 3
7 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 3
7 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
7 「bgcolor」「background-color」「background」の違い | CSS 3
7 Bootstrap v2.3.1 | 2系(Bootstrap) 3
7 16進数カラーコード ／ 2進数 3
8 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 2
8 RGB → HSL を 色モデルで考える | 色変換(色) 2
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 2
8 「属性」「プロパティ」「アトリビュート」の違い | CSS 2
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
2025/5/16 1:01 更新