0

私はプロジェクトに取り組んでおり、メディア クエリを使用してレスポンシブ レイアウトへのさまざまなアプローチを研究しています。私が考えてきた多くのことの 1 つは、それらをサポートしていないブラウザー、特に Internet Explorer バージョン 5.5 から 8 ( source ) と、 css3-mediaqueries.jsやresponseなどのオプションを使用して Javascript をフォールバック メソッドとして使用することです。 js .

2 つのうちどちらを使用するのが最適かを知りたいわけではありませんが、それらを使用する必要性がどれだけあるかを疑問視しています。

私が現在見ている方法は、ハンドヘルド デバイス (モバイルまたはタブレット) を使用している場合、メディア クエリをサポートするブラウザーを使用している可能性が最も高いということです。おそらく、これらのデバイスのブラウザーのほとんどは最新のものです。メディアクエリを念頭に置いて構築されました。したがって、ユーザーが古い IE ブラウザーで Web サイトを表示している場合、(理論的には) デスクトップ サイズのモニターを備えたデスクトップ コンピューターを使用している可能性が高くなります。つまり、css ファイルのベース グリッドのデフォルトが表示されるということです。そのため、何らかの理由でハンドヘルド サイズの画面を備えた古いバージョンの IE を使用している誰かをサポートしようとする大きな必要性はないと思います。

しかし同時に、これらの Javascript ファイルの必要性がなければ、それほど多くのサイトで使用されないでしょう。それらの必要性を私が見ることができる唯一の理由は、メディア クエリを読み取らないブラウザのためであり、メディア クエリを読み取ろうとすると問題が発生し、レイアウトにエラーや矛盾が発生する可能性があるためです。

誰かがそれに光を当てて、なぜそれらを使用する必要があるのか​​ をよりよく理解するのに役立つかどうか疑問に思っていました.おそらく私が何かを見逃しているからです。

4

2 に答える 2

0

個人的には、メディアクエリをサポートしていないブラウザでメディアクエリを複製しようとしたことはありません。メディアクエリがあるサイトでcss3以外のブラウザをサポートする必要がある場合は、css条件付きコメントを使用して、css3以外のバージョンの幅を常に修正しました。サポートがある可能性があります。

ただし、メディアクエリは、モバイルフレンドリーなデザインを作成するのに役立つだけでなく、1200ピクセルまたは1600ピクセルの幅のディスプレイ用に作成されているものの、1024ピクセルの画面でも機能する必要がある流動的なデザインにも役立ちます。この例では、古いブラウザが小さい画面で実行されている可能性が高いため、メディアクエリが非常に役立ちます。この例では、これらのライブラリの1つが役立ちます。

お役に立てば幸いです。

于 2013-03-04T17:37:16.680 に答える
0

Fortune 100 のクライアント向けに多くの Web サイトを構築しています。ほとんどの場合、これらの js プラグインは使用しません。それは実際にはいくつかのことに依存します:

  1. CSS モバイルを最初に作成しましたか、それともデスクトップを最初に作成しましたか? モバイル ファーストの場合、IE8 以下ではモバイル ビューが表示されます (これは最適ではありません)。最初にデスクトップを構築すると、デスクトップ ビューが表示されます。
  2. どのくらいのファンキーさをサポートできますか? ほとんどのクライアントは ie8 で動作することを望んでいますが、それだけです。ほとんどの人は ie7 以下を完全に放棄しています。平均的な Web サイトは ie8 では完璧ではありません。エンド ユーザーがコンテンツを取得できる限り、通常、ie8 に関して重要なことはそれだけです。ただし、一部のクライアントは完全に同意しない場合があります。
  3. それを使用または回避するやむを得ない理由はありますか? これは通常、最も重要なものです。サイトを ie8 でプルアップし、メディア クエリを使用してもサイトが完全に壊れない場合は、respond.js で試して、どのように見えるかを確認してください。

それを含めるのは信じられないほど簡単で、条件文を使用すると、新しいブラウザに読み込まれることさえありません.

<!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<!-- <![endif] -->

基本的には、サイトごとに見てください。それが役立つ場合は、それを使用してください。そうでない場合は、無視してください。

于 2015-09-28T20:45:26.390 に答える