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

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

　状態:- 　閲覧数:5,413 　投稿日: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/4/30 15:55 更新
週間人気ページランキング ／ 4-23 → 4-29
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 13
2 Inkscape | ソフトウェア 12
2 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 12
3 ツールチップが表示されないときー 10
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 6
5 ログイン 4
5 「Create Link」代替拡張機能を探した結果は、「CopyTabTitleUrl」でした。 | CopyTabTitleUrl(Chrome 拡張機能) 4
5 似顔絵ジェネレーター : 似顔絵メーカー ／ NIGAOE MAKER 4
5 RGB ⇔ Lab | 色変換(色) 4
6 Design 0 3
6 効果を打ち消すスタイルシート | CSS 3
6 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
6 他サイト調査(HTML) カテゴリー 3
6 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 3
6 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 3
7 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 2
7 気が付いたこと 2
7 別方法 2
7 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 2
7 「bgcolor」「background-color」「background」の違い | CSS 2
2025/4/30 1:01 更新