wulin.comの記事紹介（www.vevb.com）：レスポンシブWebデザイン。
3Gの人気により、ますます多くの人々が携帯電話を使用してインターネットをサーフィンしています。
モバイルデバイスは、デスクトップデバイスを超えており、インターネットにアクセスするための最も一般的な端末になっています。それで、Webデザイナーは困難な問題に直面する必要があります。さまざまなサイズのデバイスで同じWebページをどのように提示できますか？
携帯電話の画面は比較的小さく、通常は600ピクセル未満です。 PCの画面幅は一般に1,000ピクセルを超えています（現在、主流の幅は1,366×768です）、さらには2,000ピクセルに達します。さまざまなサイズの画面で満足のいく結果を得るのは簡単ではありません。
多くのWebサイトのソリューションは、モバイルバージョンやiPhone/iPadバージョンの提供など、さまざまなデバイスに異なるWebページを提供することです。これにより効果が保証されますが、非常に厄介です。いくつかのバージョンのメンテナンスが必要です。さらに、ウェブサイトに複数のポータルがある場合、アーキテクチャ設計の複雑さが大幅に向上します。
したがって、一部の人々は、一度に設計できるかどうかを長い間想像してきましたが、一般的に同じWebページに適用できるのは、さまざまなサイズの画面に自動的に適応し、画面幅に応じてレイアウトを自動的に調整しますか？
1。適応型Webデザインの概念
2010年、イーサンマルコットは、レスポンシブWebデザインという用語を提案しました。これは、画面幅を自動的に認識して対応する調整を行うことができるWebデザインを指します。
彼は、シャーロック・ホームズの冒険の6人の主人公の肖像画の例を作りました。画面幅が1300ピクセルを超える場合、6枚の写真が並んで連続しています。
画面幅が600ピクセルから1300ピクセルの場合、6枚の写真は2行に分割されます。
画面幅が400ピクセルから600ピクセルの場合、ナビゲーションバーはページのヘッドに移動します。
画面幅が400ピクセル未満の場合、6枚の写真が3行に分かれています。
Mediaqueri.esには、上記のようなより多くの例があります。
ここには、テストウィジェットもあります。このウィジェットでは、Webページに異なる解像度で画面のテスト効果を同時に表示できます。インストールすることをお勧めします。