レスポンシブレイアウトとは何ですか? HTMLレスポンシブレイアウトの実装-htmlチュートリアル-php.cn

この記事の内容はレスポンシブレイアウトとは何か？ 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 サイトの背景画像を変更または追加するコードの書き方は? （例）

HTMLのtableタグ

の紹介（コード付き）

HTMLのフレキシブルレイアウト（Flex）の紹介（コード付き）

以上がレスポンシブレイアウトとは何ですか? HTMLレスポンシブレイアウトの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。