45

レスポンシブ デザインにModernizrとRespond.jsを利用する最善の方法を慎重に検討しており、コミュニティにいくつか質問があります。

まず、Modernizr を Respond.js にバンドルする場合、IE8 以下でメディア クエリをサポートするために他のコーディングやテストは必要ないことを理解しています。つまり、Respond.js が Modernizr にバンドルされている場合、Respond.js を有効にするためにソースに Modernizr をロードするだけで済みます。正しい？

次に、これが IE8 以下でメディア クエリをサポートする最も効率的な方法だと思いますか? 要するに、既にメディア クエリをサポートしているブラウザーに必要なよりも大きな Modernizr スクリプトを含めることになります。2 つのスクリプトを分離し、メディア クエリのテストが失敗した場合にのみ Respond.js を読み込む方が効率的ではないでしょうか?

第 3 に、2 つのスクリプトを分離したい場合、必要に応じて Respond.js をロードする最良の方法は何だと思いますか? 1 つのオプションは、IE 固有の条件付きコメントを使用して Respond をロードすることです。もう 1 つのオプションは、yepnope と Modernizr を使用してメディア クエリのサポートをテストし、必要に応じて Respond を読み込むことです。これは、より効率的で障害のないものになります。

最後に、2 つのスクリプトを分離し、必要に応じて Modernizr を使用して Respond を読み込むことを選択した場合、次の 2 つの手法に遭遇しました。

<script>
        yepnope({
    test : Modernizr.mq('(only all)'),
    nope : ['js/libs/respond.min.js']
});
</script>

また

<script>Modernizr.mq('(min-width:0)') || document.write('<script src="js/libs/respond.min.js"><\/script>')</script>

2 番目は IE8 をクラッシュさせることがわかりましたが、書き直す必要があるに違いありません。どのテクニックをお勧めしますか?

すべての助けをありがとう。

4

3 に答える 3

16

まず、ModernizrをRespond.jsにバンドルする場合、IE8以下でのメディアクエリのサポートに他のコーディングやテストは必要ないことを理解しています。つまり、Respond.jsがModernizrにバンドルされている場合、Respond.jsをアクティブにするには、ソースにModernizrをロードするだけです。正しい？

始めるには、少なくともいくつかのCSS3メディアクエリが必要です。Respond.jsは、基本的に、それらをサポートしていないブラウザ（たとえば、8未満のIE）用のメディアクエリの単なるJavaScript実装です。Respond.jsへの参照がCSS3メディアクエリの後に来ることを確認してください（リンク）。

そうです、カスタムビルドなどからModernizrにRespond.jsがバンドルされていて、それがCSS3の後にロードされていると仮定すると、すべて問題ありません。また、Modernizrでは、HTMLの構成をさらに行う必要があります（リンク）

次に、これがIE8以下でメディアクエリのサポートを実現するための最も効率的な方法だと思いますか？本質的には、すでにメディアクエリをサポートしているブラウザに必要なものよりも大きなModernizrスクリプトを含めることになります。2つのスクリプトを分離し、メディアクエリのテストが失敗した場合にのみRespond.jsをロードする方が効率的ではないでしょうか。

Modernizrには、すぐに使用できるメディアクエリがないブラウザはサポートされていません。カスタムビルドに追加する必要があります。ですから、はい、常に応答を含めるのが賢明だと思います。縮小すると、ライブラリは3kbを少し超えるだけを追加し、Modernizrファイルにそれを含めても別のGETリクエストは追加されません。そこに置いておくだけで、すべてに備えることができます。

第三に、Modernizrメソッドを使用します。私は新しいものを使うのが好きです、その余分なJavaScriptはすべて邪魔になります。

于 2011-12-05T03:58:59.963 に答える
5

Respondの新しいバージョンにはいくつかの機能テストが含まれているため、ModernizrやYepnopeは必要ありません。

リビジョンは次のとおりです： https ：//github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2

メインのrespond.js関数から外部にwindow.matchMediaポリフィルを含めました。このポリフィルのソースコードはhttps://github.com/paulirish/matchMedia.jsにあります。すぐに使用できるように含めると、更新を簡単に維持でき、すでに含まれているファイルをより小さく圧縮できます。 Modernizrまたはその他の方法で作成します（使用している場合は、Respond.jsから削除できます）。

また、yepnope.jsを使用すると、メディアクエリスタイルが解析および適用される前に、非メディアクエリスタイルが表示されるまでに遅延が発生する可能性があることに注意してください。これをできるだけ回避するために、respond.jsをヘッダーに配置することをお勧めします。ただし、フッターにjsファイルを保持しておくこともお勧めします。

于 2012-03-05T21:02:09.900 に答える
4

機能テストは、tkane2000 が言うように新しい lib にある可能性があります ... Modernizr を介してこれを実行できる可能性があることを言及したかっただけです。

  <script>
    Modernizr.load({
    test: Modernizr.mq('only all'),
    nope: 'js/respond.min.js'
  });
  </script>

元のポスターには無効なメディア クエリ チェック '(only all)' が含まれていると思います。かっこを削除すると、respond.js が適切に含まれているようです。

于 2013-07-12T17:59:48.683 に答える