レスポンシブ Web デザイン_html/css_WEB-ITnose-htmlチュートリアル-php.cn

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 を使用する必要があります。

< +要素。これは非常に重要です。

具体的には、CSS コードではピクセル幅を指定できません:

width:xxx px; パーセント幅のみ指定できます:

width: xx%;

or

width:auto;

4. 相対サイズ

のフォントも絶対サイズ (px) を使用できず、相対サイズ (em) のみを使用します。

body {

font:normal 100% Helvetica, Arial, sans-serif; } 上記のコードは、フォント サイズがページのデフォルト サイズである 16 ピクセルの 100% であることを指定しています。

h1 {

font-size: 1.5em; }

すると、h1のサイズはデフォルトサイズの1.5倍の24ピクセル（24/16=1.5）になります。

small {

font-size: 0.875em; }

small 要素のサイズは、デフォルト サイズの 0.875 倍、つまり 14 ピクセル (14/16=0.875) です。

5. 流体グリッド

「流体グリッド」の意味は、各ブロックの位置が固定されておらず、浮遊していることです。

.main {

width: 70%; } .leftBar {

width: 25%; }

float 利点は、幅が小さすぎて 2 つの要素に収まらない場合、後者の要素が自動的に配置されることです。水平方向にオーバーフローすることなく前の要素の一番下までスクロールし、水平スクロール バーの表示を回避します。

さらに、絶対位置決め (位置: 絶対) を使用する場合は十分に注意する必要があります。

6. CSS の読み込みを選択します

「アダプティブ Web デザイン」の中核は、CSS3 によって導入された Media Query モジュールです。

これは、画面の幅を自動的に検出し、対応する CSS ファイルをロードすることを意味します。

media="screen and (max-device-width: 400px)" href="tinyScreen.css" />

の意味上記のコード はい、画面の幅が 400 ピクセル (max-device-width: 400px) 未満の場合、tinyScreen.css ファイルが読み込まれます。

media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" / >

画面幅が 400 ピクセルから 600 ピクセルの間の場合、smallScreen.css ファイルが読み込まれます。

HTML タグを含む CSS ファイルを読み込むだけでなく、既存の CSS ファイルに CSS ファイルを読み込むこともできます。

@import url("tinyScreen.css") screen と (max-device-width: 400px);

7. CSS @media rules

同じ CSS ファイル内で、異なるものに従って区別することもできます。画面の評価、異なる CSS ルールの適用を選択します。

@@media画面および（max-device-width：400px）{

column { width：auto; } #sidebar {display：none;

}} 上記のコードは、上記のコードは、画面幅が 400 ピクセル未満の場合、列ブロックはフロート解除され (float:none)、幅は自動的に調整され (width:auto)、サイドバー ブロックは表示されません (display:none)。

8. アダプティブ画像 (流動画像)

レイアウトとテキストに加えて、「アダプティブ Web デザイン」では画像の自動スケーリングも実装する必要があります。 これに必要な CSS コードは 1 行だけです:

img { max-width: 100%;}

このコード行は、Web ページに埋め込まれているほとんどのビデオにも有効なので、次のように記述できます:

img , object { max-width: 100 %;}

古いバージョンの IE は max-width をサポートしていないため、次のように記述する必要があります:

img { width: 100%;}

また、 Windows プラットフォームでは画像が拡大縮小されるため、画像の歪みが発生する可能性があります。現時点では、IE 独自のコマンド

img { -ms-interpolation-mode: bicubic; }

または、Ethan Marcotte の imgSizer.js を使用してみてください。 O l adDloadEvent (function () {

vargs = document.GetelementByid ("content").GetelementsBytagName ("IMG");

});ロードするのがベスト異なる画面サイズに応じて異なる解像度の画像。これを行うには、サーバー側とクライアント側の両方でさまざまな方法があります。