アダプティブ Web デザイン手法 (携帯電話での優れたアクセス エクスペリエンス)_html/css_WEB-ITnose

1. HTML ヘッダーに viewport タグを追加します。

Web サイトの HTML ファイルの先頭に、ビューポート メタ タグを追加して、ビューポートの幅がデバイスの画面の幅と等しく、初期スケーリングが実行されないことをブラウザーに伝えます。コードは次のとおりです:

コードをコピーします

コードは次のとおりです:

このコードは、Chrome、Firefox、および IE9 以降のブラウザをサポートしますが、IE8 および IE8 未満のブラウザはサポートしません。

2. CSS ファイルの最後に、さまざまな画面解像度のルールを追加します。

たとえば、次のコードを使用すると、画面幅が 480 ピクセル未満のデバイス (iPhone など) で Web ページのサイドバーの中央のコンテンツ列の幅を非表示にし、自動的に調整することができます。次のコードは Z-Blog 用であり、WordPress 関連のタグ名のみを変更する必要があります。

コードをコピーします

コードは次のとおりです:

@media screen and (max-device-width: 480px) {
# divMain{
float: none;
width:auto;
}
#divSidebar {
}
}

3. レイアウト幅には相対幅を使用します。

Web ページのフレーム全体には絶対幅を使用できますが、下部のコンテンツ フレームやサイドバーなどには相対幅を使用して、さまざまな解像度に合わせて簡単に変更できるようにすることをお勧めします。もちろん、相対幅を使用する必要はありません。その場合、@media screen および (max-device-width: 480px) の小さな画面の場合は、各 div の幅を増やす必要がありますが、これは実際にはさらに面倒です。

4. ページで相対フォントを使用します

HTML ページでは絶対フォント (px) を使用せず、相対フォント (em) を使用します。ほとんどのブラウザでは、通常、em = が使用されます。 px/16 変換。たとえば、16px は 1em に相当します。

上記の点を踏まえ、ブログのCSSを修正したところ、iPhoneからより快適にページを閲覧できることが分かりましたが、一つだけ解決できていない問題があり、上部のナビゲーション バー navbar です。改行後の表示に問題があります。この問題をより良く解決する方法がわかりません (更新: ネチズンからのヒントを受けて、オーバーフローを追加しました)。 :hidden; ナビゲーション バーのスタイルに divNavbar を追加すると、この問題を 1 行で解決できます。

下の図は iPhone を使用してアクセスしたもので、CSS をアダプティブ Web ページに変更した後、Moonlight Blog のホーム ページは、最適化されていない元のページよりもはるかに良く表示されます。

つまり、上記の 4 つの手順に従って変更を行うと、Web サイトを複数のデバイスでの閲覧に適したページに簡単に変更できます。これは、モバイルから Web サイトにアクセスするユーザーにとっては確かに良いことです。電話。

以下はより詳細な補足情報です:

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

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

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

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

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

2010 年に Ethan Marcotte が提案した「レスポンシブ Web デザイン」(Responsive Web Design)デザイン）とは、画面幅を自動的に認識してそれに合わせて調整できるWebデザインを指す用語です。

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

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

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

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

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

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

2. Web ページの幅の自動調整を許可します

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

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

ビューポートは Web ページのデフォルトの幅と高さです。上記の行 コードの意味は、Web ページの幅がデフォルトで画面の幅と等しく (width=device-width)、元のスケーリング率 (initial-scale=1) が 1.0 であることです。 Web ページの初期サイズは画面領域の 100% を占めます。

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

3. 絶対幅を使用しないでください

ページのベースとなるのは、画面の幅によってレイアウトが調整されるため、絶対幅のレイアウトや絶対幅の要素を使用することはできません。これは非常に重要です。

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

width:xxx px;

パーセント幅のみ指定できます:

width: xx%;

または

width:auto;

フォントは絶対サイズ (px) を使用できません。相対的なサイズ (em) のみを使用できます。

body {

font:normal 100% Helvetica, Arial, sans-serif;

}

上記のコードは、フォント サイズがデフォルト サイズの 100% であることを指定します。ページ、つまり 16 ピクセルです。

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 {

float: right; %;

}

float の利点は、幅が小さすぎて 2 つの要素が収まらない場合に、次の要素が自動的に配置されることです。前の要素の下にスクロールすると、水平方向にオーバーフロー (オーバーフロー) しません。水平スクロール バーは避けてください。

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

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") 画面と (max-device-width: 400px);

7. CSS @media ルール

同じ CSS ファイルで、異なる画面解像度に応じて異なる CSS ルールを適用することも選択できます。

@media screen and (max-device-width: 400px) {

.column {

float: none; width:auto; }

:none)、幅は自動調整され (width:auto)、サイドバーブロックは表示されません (display:none)。

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

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

これは 1 行の CSS コードです:

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 を使用してみてください。

addLoadEvent(function() {

var imgs = document.getElementById("content").getElementsByTagName("img");

imgSizer.collat​​e(imgs);

});

ただし、可能であれば、さまざまな画面サイズに応じてさまざまな解像度の画像をロードすることが最善です。これを行うには、サーバー側とクライアント側の両方でさまざまな方法があります。