web-dev-qa-db-ja.com

Respond.jsを使用したModernizr

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

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

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

3番目に、2つのスクリプトを分離したい場合、必要に応じてRespond.jsをロードする最良の方法は何だと思いますか？ 1つのオプションは、IE特定の条件付きコメントを使用して応答をロードすることです。別のオプションは、yepnopeとModernizrを使用してメディアクエリサポートをテストし、必要に応じて応答をロードすることです。耐障害性。

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

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

OR

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

2回目でIE8がクラッシュすることを発見しましたが、書き換える必要があります。どのテクニックをお勧めしますか？

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

javascripthtml5css3modernizrpolyfills
45
dropseed

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

さて、少なくともいくつかのCSS3メディアクエリが必要です。 Respond.jsは基本的に、JavaScriptをサポートしていないブラウザ向けのメディアクエリのJavaScript実装です（例IE 8未満）。Respond.jsへの参照はCSS3の後に来るようにしてください。メディアクエリ（ link ）。

そのため、カスタムビルドなどからModernizrにRespond.jsがバンドルされていて、CSS3の後にロードされると仮定すると、すべてが順調です。また、Modernizrでは、HTMLでさらに構成が必要です（ link ）

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

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

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

16
Andrew

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ファイルをフッターに保持することもできます。

5
tkane2000

機能テストは、tkane2000が言うように、新しいlibで行われるかもしれません...おそらく、Modernizrを介してこれを行うことができることを言及したいだけです。

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

オリジナルのポスターは、無効なメディアクエリチェック '（すべてのみ）'であると考えています...読んだものに基づいた括弧は使用しないでください。括弧を削除すると、respond.jsが適切に含まれているようです。

4
armyofda12mnkeys