レスポンシブ Web デザイン_html/css_WEB-ITnose

http://www.ruanyifeng.com から転載

3G の普及により、携帯電話を使用してインターネットにアクセスする人がますます増えています。

モバイル デバイスはデスクトップ デバイスを追い越し、インターネットにアクセスするための最も一般的な端末になりつつあります。その結果、Web デザイナーは、異なるサイズのデバイスで同じ Web ページをどのようにレンダリングするかという難しい問題に直面することになります。

携帯電話の画面は比較的小さく、幅は通常 600 ピクセル未満ですが、PC の画面幅は通常 1000 ピクセル以上 (現在の主流の幅は 1366×768)、中には 2000 ピクセルに達するものもあります。ピクセル。異なるサイズの画面上で同じコンテンツを満足のいく結果で表示するのは簡単ではありません。

多くの Web サイトの解決策は、専用のモバイル バージョンや iPhone/iPad バージョンを提供するなど、デバイスごとに異なる Web ページを提供することです。これにより確実な効果は得られますが、さらに面倒であり、同時に複数のバージョンを維持する必要があります。さらに、Web サイトに複数のポータルがある場合、アーキテクチャ設計が大幅に複雑になります。

では、同じ Web ページが異なるサイズの画面に自動的に適応し、画面の幅に応じてレイアウト (レイアウト) を自動的に調整できるように、「一度デザインして普遍的に適用する」ことが可能かどうかを長い間想像していましたか?

1. 「レスポンシブ Web デザイン」の概念

2010 年、Ethan Marcotte は「レスポンシブ Web デザイン」という用語を提案しました。これは、画面の幅を自動的に認識し、それに応じて調整された Web デザインを行うことができることを意味します。 。

彼は「シャーロック・ホームズの冒険」の6人の主人公の頭を使ったサンプルを作りました。画面幅が 1300 ピクセルを超える場合は、6 枚の画像が 1 列に並んで配置されます。

画面幅が600ピクセルから1300ピクセルまでの場合、6枚の写真は2行に分割されます。

画面幅が 400 ピクセルから 600 ピクセルの間の場合、ナビゲーション バーは Web ページの先頭に移動します。

画面幅が400ピクセル未満の場合、6枚の写真は3行に分割されます。

mediaqueri.es には、上記のような例が他にもあります。

Webページ上に異なる解像度の画面のテスト結果を同時に表示できるテストガジェットもありますので、インストールすることをお勧めします。

2. Web ページの幅を自動的に調整できるようにします

「アダプティブ Web デザイン」はどのように機能しますか?そんなに難しいことではありません。

まず、Web ページのコードの先頭にビューポート メタ タグの行を追加します。

viewport は Web ページのデフォルトの幅と高さです。上記のコード行は、 Web ページの幅はデフォルトです。画面の幅 (width=device-width) と同じです。元の拡大縮小率 (initial-scale=1) は 1.0 です。つまり、Web ページの初期サイズが画面領域の 100% を占めます。 。

IE9 を含むすべての主要なブラウザーがこの設定をサポートしています。古いブラウザ (主に IE6、7、8) の場合は、css3-mediaqueries.js を使用する必要があります。