ä¸è¦å²ç¬æåçæ§
目次:
初期のウェブサイト開発者は、ユーザがコンピュータ上でそれらを見るときにウェブサイトを設計することについてあまり心配する必要はなく、それらのコンピュータは画面解像度を固定していました。モバイル革命に伴い、情報のためにモバイルデバイス（タブレットまたは携帯電話）で検索する人が増えています。したがって、ウェブサイト開発者は、Windows PCからモバイルデバイスまであらゆるものに対応するウェブサイトを作成する必要があります。この記事では、 アダプティブvsレスポンシブウェブデザイン の違いについて説明し、どちらがあなたとあなたの組織に適しているかを判断できるようにします。
異なるスクリーン解像度に対応できるようにウェブサイトを作成する方法は2つあります：PCから携帯電話へ。この方法はアダプティブウェブデザインとレスポンシブウェブデザインです。いずれの場合も、最終的な目的は、あらゆるタイプの画面解像度で見ることができるウェブサイトを制作することです。
レスポンシブウェブデザイン
レスポンシブウェブデザインは、余分なコーディングを必要とし、いわゆる「流体グリッド」を採用しています。数値は正確なピクセル数ではなく、「パーセンテージ」で指定されます。これにより、同じWebサイトのコードがPCの画面や携帯電話の画面に正しく表示されます。したがって、どのように画面のサイズを変更しても、同じWebサイトが読みやすい形で表示されます。小規模なウェブサイトの場合、テキストと画像は、画面スペースに流れやすく、ウェブサイトを壊すことなく、またはウェブサイトの一部を切り取ることなくフィットできます。
レスポンシブなウェブデザインアプローチは、CSSだけでなくCSS3を使用することを必須としています。
アダプティブウェブデザイン
アダプティブウェブデザインは、PCスクリーンに加えてタブレットや携帯電話で表示可能なウェブサイトを表示することにも重点を置いています。しかし、アプローチは少し異なります。レスポンシブウェブデザインでは、自由なテキストフローと画像のサイジングが異なるスクリーンに合うようにする柔軟性がありました。アダプティブウェブデザインでは、開発者はあらかじめ決められたスクリーンサイズとコードを使用します。すなわち、ユーザがウェブサイトを訪れたとき、ウェブサイトは使用されているデバイスのタイプを決定し、その特定のデバイススクリーンサイズ用に設計されたウェブサイトを提示する。場合によっては、デバイスによってコンテンツが異なる場合があります。たとえば、PCの場合は1280×800ピクセル、タブレットの場合は8インチ、モバイルの場合は5インチと考えられます。適応型ウェブ設計の初期のコードには、スクリーンの識別が含まれています。 PCの場合は、WebサイトのPCバージョンを表示します。それが8インチのタブレットであれば、ウェブサイトのタブレット版を表示し、同様に携帯電話の場合はモバイル版のウェブサイトを表示します。正確にはピクセルで表示するのではなく、パーセンテージで表示します。
新しいデバイスが異なる画面解像度で表示される場合、開発者はより新しいスクリーン解像度を組み込むためにコーディングに戻らなければなりません。
レスポンシブウェブデザインと比較して、適応性のあるウェブデザインはコード作成が容易で、ほとんどの開発者がレスポンシブウェブデザインより後者を選択します。コードは複雑で、固定ピクセル値の代わりにパーセンテージ値を使用します。デバイスの画面サイズに応じて拡大縮小するウェブサイトを構築するには、集中力が必要です。アダプティブウェブデザインの場合のように、異なるデバイス用に異なるウェブサイトを簡単に作成できます。開発者はさまざまなデバイスサイズの異なるWebサイトを作成するため、Webデザインの適応性は向上しますが、レスポンシブなWebデザインと比較しても簡単です。
市場にはモバイルデバイスが多すぎるため、開発者は必ずしもすべての種類の画面解像度を含むとは限りません。
アダプティブウェブサイトは、ウェブサイトが最初にどのデバイスとどのスクリーン解像度が使用されているか把握しているので、読み込みが少し遅くなります。それに基づいて、ウェブサイトの関連バージョンがデバイスの画面にロードされます。レスポンシブウェブデザインの場合、シングルコードが使用され、モバイル画面に合わせて自動的に縮小されます。
MSDNのこの記事を
ウェブデザイン
。