レスポンシブ デザインの開発プロセスを合理化する方法を見つけようとしています。標準的な方法は、モバイルからデスクトップ サイズへのメディア クエリを使用してモバイル ファーストを設計することです。
私が見ている問題は、IE7 と IE8 のサポートです。誰もがしようとしている解決策は、response.js を使用することです。JavaScript を無効にしているユーザーのサポートについてはどうですか? 私が見ていないものはありますか？
編集： JSが無効になっているユーザーの割合はごくわずかです。このプロジェクトの要件です。
モバイル ファーストは、グレースフル デグラデーションの道をたどります。簡単に言えば、「ここまでしか後方支援を提供しなければ、何も得られない」ということです。また、古いブラウザーの場合は、何も表示されません。これは、スクリプトが実行しようとしているポリフィル、パッチ、および回避策のパスです。
一方、プログレッシブ エンハンスメントは、すべての基本機能をブラウザで実行できる範囲までしか提供しません。「あなたがサポートする最新のものまですべてサポートします」というようなものです。これがあなたがやろうとしていることであり、あなたがすべきことです。
それでは、CSS がカスケードしているという事実を利用しましょう。最初は固定レイアウトまたは可変レイアウトを使用し、次にレスポンシブ レイアウトを使用します。メディア クエリを理解していないブラウザーは単純にそれを無視し、固定または流動的なスタイルが透けて見えるようにします。
モバイル ブラウザはメディア クエリをサポートしているか、JS がオンになっている可能性が高いです。Wap ブラウザも流動的なレイアウトで問題なく動作します。
*JS については、95% のユーザーが JS をオンにしています。残りの5%は
*さて、そのうちのどれくらいがブラウザですか? おそらく3番と4番。IEの可能性は？1/3? 純粋な CSS を使用し、JS を使用しないアプローチを使用するために、人口の 5% の半分の 1/3 にヒットする確率はどれくらいですか?
可能性が存在するという事実に頼らないでください。これらは、現実の世界では 10 億分の 1% しか発生しない極端な状況です。UXの人々が言うように：人口統計。
*誇張された見積もり
ie.css シートの条件付きコメントを使用して、古い IE のデスクトップ サイズで固定幅バージョンを作成するだけです。(この素晴らしい例については、http://html5boilerplate.com/を参照してください)
Respond.js は非常に遅く実行されることが多く、"従来の固定幅" IE 7.8 よりもデバッグがはるかに困難です。そのため、サポートするのにかなりの労力がかかります (非 js ユーザーをサポートするプロジェクト要件の一部ではなかったとしても)。
エンドユーザーの視点から考えてみてください。IE 7 を実行しているおばあちゃんのベージュ色のタワーを借りる必要がある場合は、バグが多く反応が遅いサイトよりも高速で固定幅のサイトを使用したいと思います。また、これらはユーザーがとにかく固定幅のサイトに慣れている古いコンピューターです。
また、SASS を使用してブレークポイントの狂気を解消することも検討してください。私のお気に入りの mixin は「Breakpoint」です。メディア クエリをサポートしていないブラウザーのサポートに関連するドキュメントはこちらをご覧ください。つまり、変数をメディア クエリに追加して「export to my IE.css = true」と表示すると、これらが ie.css シートのコア コンポーネントになり、カスタム IE の作業が少なくなります。
https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks
それは 2013 年のことです。誰かが js を無効にしていると、Web エクスペリエンスが最悪になることを知っています。あなたのサイトだけでなく、どこでも。ユーザーの 1% 未満なので、心配する必要はありません。基本的に、jsが有効になっていると想定できます/すべきです。