レスポンシブレイアウトとは何ですか? HTMLレスポンシブレイアウトの実装
この記事の内容はレスポンシブレイアウトとは何か？ HTML レスポンシブ レイアウトの実装については、参考にしていただければ幸いです。
ステップ 1: Web ページ コードの先頭に、ビューポート メタ タグの行を追加します
(1) ビューポートは Web ページのデフォルトの幅と高さです。上記のコード行は、Web ページの幅を意味します。デフォルトでは画面の幅と等しく (width= device-width)、元の拡大縮小率 (initial-scale=1) は 1.0 です。つまり、Web ページの初期サイズは画面領域の 100% を占めます。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
IE9 を含むすべての主要なブラウザーがこの設定をサポートしています。古いブラウザ (主に IE6、7、8) の場合は、css3-mediaqueries.js を使用する必要があります。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries- js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->(2) X-UA-Compatibility
X-UA-CompatibilityはIE8から新たに追加された設定であり、IE8未満のブラウザでは認識されません。 メタにX-UA-Compatibilityの値を設定することで、Webページの互換モード設定を指定できます。
#IE ブラウザでは、ドキュメント標準を宣言するために DTD を使用するかどうかに関係なく、IE8/9 は IE7 エンジンを使用してページをレンダリングします。
<meta http-equiv="X-UA-Compatible" content="IE=7">
#IE ブラウザ、IE8/9 は IE8 エンジンを使用してページをレンダリングします。
<meta http-equiv="X-UA-Compatible" content="IE=8">
#IE ブラウザ、IE8/9 以降のバージョンでは、ページのレンダリングに IE の最上位バージョンが使用されます。
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> <meta http-equiv="X-UA-Compatible" content="IE=7,9">
#IE=edge は、最新のエンジンを使用して Web ページをレンダリングするように IE に指示し、chrome=1 は Chrome Frame をアクティブにします。
ここでの chrome=1 は、IE のテクノロジーが Chrome ブラウザをシミュレートするために強化されたことを意味するのではなく、Google が開発した Google Chrome Frame (Google Embedded Browser Framework GCF) に関連しています。このプラグインは、ユーザーの IE ブラウザの外観を変更しないままにできますが、ユーザーは実際に Web を閲覧するときに Chrome カーネルを使用しており、Windows XP 以降で IE6/7/8 をサポートします。
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
ステップ 2: 流動的なレイアウト
ページ内の各ブロックの位置は固定されておらず、幅が小さすぎて 2 つの要素に収まらない場合は、次の要素が自動的に前の要素にスクロールします。水平方向のオーバーフローがなく、水平スクロールバーの出現を回避します
.left{ width:30%; float:left}
.right{ width:70%; float:right;}ステップ 3: CSS @media ルール、CSS の選択的読み込み
@media screen and (max-device-width: 400px) { .left{ float:none;} }画面が 400 より小さい場合、左でフローティングが解除されます。
「アダプティブ Web デザイン」の中核は、CSS3 によって導入された Media Query モジュールです。画面幅を自動的に検出し、対応する CSS ファイルを読み込みます。画面幅が 600 ピクセル (max-device-width: 600px) 未満の場合は、css600.css ファイルを読み込みます。画面幅が 600 ピクセルから 980 ピクセルの間の場合、css600-980.css ファイルが読み込まれます。
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />
HTML タグを含む CSS ファイルを読み込むだけでなく、既存の CSS ファイルに読み込むこともできます
@import url("css600.css") screen and (max-device-width: 600px);ステップ 4: 絶対幅、フォント サイズを使用しないでください
(1) width:auto / width:XX%; ;
(2) フォント サイズは、ページのデフォルト サイズ (16 ピクセル) の 100% です。フォントには絶対サイズ「PX」を使用せず、相対サイズ「REM」を使用してください
html{font-size:62.5%;} body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem;ステップ 5: 画像の適応
「アダプティブ Web デザイン」では、画像の自動スケーリングも実装する必要があります。
img, object {max-width: 100%;}古いバージョンの IE は最大幅をサポートしていないため、次のように記述する必要があります:
img {width: 100%;}Windows プラットフォームで画像を拡大縮小すると、画像の歪みが発生する可能性があります。現時点では、IE 独自のコマンド
img { width:100%; -ms-interpolation-mode: bicubic;}を使用するか、js--imgSizer.js
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});を使用してみることができます。 おすすめ関連記事:
HTML で Web サイトの背景画像を変更または追加するコードの書き方は? （例）
