アダプティブ Web デザインを実現する方法に関する関連知識ポイントの要約

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

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

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

コードをコピー

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

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

古い IE6、7、8 ブラウザでは、js 処理が必要です。主なプラットフォームは iOS と Android なので、Opera のサポート不足は一時的に無視できます。

2. 絶対幅を使わない

Web ページは画面の幅に応じてレイアウトを調整するため、絶対幅のレイアウトや絶対幅の要素は使用できません。これはとても重要です。

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

幅:xxx ピクセル;

列幅を定義するにはパーセンテージのみを指定できます。

幅: xx%;

または：

幅:自動;

または：

最大幅と最大高 max-width、max-height を使用します。

3. 相対的なフォントサイズ

フォントのサイズは絶対サイズ (px) では設定できず、相対サイズ (em) でのみ設定できます。

コードをコピー

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

体 {
フォント: 標準 100% Helvetica、Arial、sans-serif;
}

上記のコードは、フォントサイズがページのデフォルトサイズ (16 ピクセル) の 100% になることを指定しています。

コードをコピー

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

h1 {
フォントサイズ: 1.5em;
}

h1 のサイズは、デフォルトサイズの 1.5 倍、つまり 24 ピクセル (24/16 = 1.5) になります。

コードをコピー

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

小さい
フォントサイズ: 0.875em;
}

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

4. 流動的なグリッド
「流動的なレイアウト」とは、各ブロックの位置が固定ではなく、浮動していることを意味します。

コードをコピー

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

。主要 {
フロート: 右;
幅: 70%;
}
.leftBar{
フロート: 左;
幅: 25%;
}

float の利点は、幅が小さすぎて 2 つの要素を収容できない場合、後者の要素は前者の要素の下部まで自動的にスクロールされ、水平方向にオーバーフローしないため、水平スクロールバーが表示されなくなることです。
また、絶対位置指定（position: absolute）を使用する場合は、細心の注意を払う必要があります。

5. 「アダプティブウェブデザイン」の核となるのは、CSS3で導入されたメディアクエリモジュールです。

つまり、画面の幅を自動的に検出し、対応する CSS ファイルを読み込むということです。
media="screen および (max-device-width: 400px)"
href="tinyScreen.css" />
上記のコードは、画面の幅が 400 ピクセル未満 (max-device-width: 400px) の場合、tinyScreen.css ファイルを読み込むことを意味します。
media="screen かつ (最小幅: 400px) かつ (最大デバイス幅: 600px)"
href="smallScreen.css" />
画面の幅が 400 ピクセルから 600 ピクセルの場合、smallScreen.css ファイルが読み込まれます。
HTML タグを使用して CSS ファイルを読み込むだけでなく、既存の CSS ファイルに読み込むこともできます。
@import url("tinyScreen.css") 画面と (max-device-width: 400px);

6. CSS @mediaルール

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

コードをコピー

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

@media screen および (最大デバイス幅: 400px) {
。カラム {
フロート: なし;
幅:自動;
}
#サイドバー {
表示:なし;
}
}

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

列とフロートには線形デザインを使用します。

コードをコピー

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

@media スクリーンと (最大幅: 480px) {
div、li {
表示: ブロック;
フロート:なし;
幅:100%;
}
}

7. 流動的なイメージ

「レスポンシブ Web デザイン」では、レイアウトとテキストに加えて、画像の自動スケーリングも実現する必要があります。
これには CSS が 1 行だけ必要です:
画像 { 最大幅: 100%;}
このコード行は、Web ページに埋め込まれたほとんどのビデオでも機能するため、次のように記述できます。
画像、オブジェクト { 最大幅: 100%;}
古いバージョンの IE は max-width をサポートしていないため、次のように記述する必要があります。
画像の幅: 100%;
さらに、Windows プラットフォームで画像を拡大縮小すると、画像の歪みが発生する可能性があります。現時点では、IE 独自のコマンドを使用してみることができます。
img { -ms 補間モード: バイキュービック; }
あるいは、Ethan Marcotte による imgSizer.js を使用します。

コードをコピー

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

addLoadEvent(関数() {
var imgs = document.getElementById_x_x_x_x("content").getElementsByTagName("img");
imgSizer.collate(画像);
});

ただし、条件が許せば、画面サイズに応じて異なる解像度の画像を読み込むのが最適です。これを行うには、サーバー側とクライアント側の両方で多くの方法があります。

8. ホームページのコンテンツ検索バー、製品カテゴリ、人気製品、キーワード。

9. 水平スクロールバーを避ける

画像やその他のページ要素によって、コンテナ要素が正常に流れなくなることがあります。次のスクリプトを使用すると、この動作を簡単に防ぐことができます。

コードをコピー

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

img、iframe {最大幅:100%;ボックスサイズ:ボーダーボックス;}