達成するための詳細な応答HTMLのレイアウト

最初のステップ：先頭ページのコードでは、ラインビューポートメタタグを追加します

スクリーンの幅（幅=デバイス幅）、元のスケールにページ幅のデフォルト（初期スケール= 1）1.0の、すなわち、ページの最初の：（1）ビューポートは、このライン上のWebデフォルトの幅と高さは、手段であります画面領域のサイズの100％。

<メタ名= 「ビューポート」コンテンツ= 「幅=デバイス幅、初期スケール= 1.0、最大規模= 1.0 」 />

　　すべての主要なブラウザはIE9を含め、この設定をサポートしています。これらの古いブラウザ（主にIE6,7,8）の場合は、使用しCSS3-mediaqueries.jsが必要です。

<！ - [ 場合は IE LT 9 ]> 　　　 　
    <スクリプトSRC = " のhttp：// CSS3-mediaqueries- js.googlecode.com/svn/trunk/css3-mediaqueries.js " > 
    </ SCRIPT> 
<！[endifの] - >

（2）X-UA-互換

　　以下IE8ブラウザが認識されないため、新たに追加されたので、X-UA-の互換性がIE8設定されています。メタ中X-UA-の互換性の値を設定することでページに互換モードを指定することができます。

　　 #IEブラウザは、関係なく、DTD宣言文書の標準かどうかの、IE8 / 9 IE7エンジンがページをレンダリングすることになります。

<META HTTP-当量= " X-UA-互換性のある"コンテンツ= " IE = 7 " >

　　#IEブラウザ、IE8 / 9は、ページをレンダリングするためにIE8エンジンになります。

<META HTTP-当量= " X-UA-互換性のある"コンテンツ= " IE = 8 " >

　　#IEブラウザは、IE8 / 9以降では、ページをレンダリングするためにIEの最新バージョンとなります。

<メタHTTP-当量= " X-UA-互換"コンテンツ= " IE =縁" > 
<メタHTTP-当量= " X-UA-互換"コンテンツ= " IE = 7、IE = 9 " > 
<メタHTTP-当量= " X-UA-互換性のある"コンテンツ= " IE = 7,9 " >

　　＃IE =最新のWebページのレンダリングエンジンを使用するためにIEを伝えるために、エッジ、クロム= 1あなたはクロームフレームをアクティブにすることができます。

　　= 1クロムはここでその技術がIEがChromeブラウザをシミュレートすることができます強化しますが、GoogleはGoogle Chromeのフレーム（Googleのブラウザ組み込みフレームワークGCF）の関連を開発したと言うことではありません。このプラグインは、IEブラウザのユーザーが同じように見えることができますが、Webを閲覧する際、ユーザが実際に使用されることはIE6のWindows XPおよびそれ以前のシステム/ 7/8クロームカーネル、およびサポートです。

<META HTTP-当量= " X-UA-互換性のある"コンテンツ= " IE =エッジ、クロム= 1 " >

ステップ2：流体レイアウト

　　各ブロックのページ位置が固定されていない、フローティングされ、幅は、2つの要素に合わせて小さすぎる場合、後者の要素は自動的に前部要素の下にスクロールされ、水平方向に（オーバーフロー）がオーバーフローしないであろう水平スクロールバーが表示されないようにします

.LEFT {幅：30％; フロート：左} 
.RIGHT {幅：70％; フロート：右;}

第三段階：選択ローディングCSSのCSSの@mediaルール

@media画面（MAX-デバイス幅：400ピクセル）{.LEFT { フロート：なし;}}

　　画面が400未満である場合、キャンセルフローティング左。

　　コア「RWD」は、CSS3メディアクエリモジュールの導入です。次に、自動スクリーンの幅の検出、及び画面の幅未満600個のピクセル（MAX-デバイス幅：600PX）である場合、適切なCSSファイルをロードし、ファイルcss600.cssをロードします。画素600の間の画面の幅が980ピクセルにした場合、css600-980.cssファイルがロードされます。

<リンクのrel = " スタイルシート"タイプ= " テキスト/ cssの"メディア= " 画面と（MAX-デバイス幅：600PX）"のhref = " スタイル/ CSS / css600.css " /> 
<リンクのrel = " スタイルシート"タイプ= " テキスト/ CSS "メディア= " 画面と（最小幅：600PX）および（MAX-デバイス幅：980px）" HREF = " css600-980.css " />

　　HTMLタグとCSSファイルをロードするだけでなく、既存のCSSファイルをロードすることができます

URL（@import " css600.css "）画面と（MAX-デバイス幅：600PX）。

ステップ4：絶対幅、フォントサイズを使用しないでください。

　　（1）幅：オート。/幅：XXの％。

　　（2）デフォルトのフォントサイズが100％、すなわち、16個のピクセルのページサイズです。「REM」の相対的なサイズを使用して、絶対的なフォントサイズ「PX」を使用しないでください。

HTML {フォントサイズ：62.5％;} 
本体{フォント：通常100％のArial、サンセリフ;フォントサイズ：14px; フォントサイズ：1 .4rem。}

ステップ5：アダプティブ写真

　　「RWD」も自動画像スケーリングを実装する必要があります。

IMG、オブジェクト {最大幅：100％;}

　　IEの古いバージョンでは、最大幅をサポートしていないので、私は書かなければなりませんでした：

IMG {幅：100％;}

　　Windowsプラットフォームは、画像をスケーリングするとき、画像の歪みを見ることができます。この場合は、独自のコマンドIEを使用してみてください

IMG {幅：100％; -ms補間モード：バイキュービック;}

　　imgSizer.js - またはJSを使用

addLoadEvent（関数（）{ 　　　　
         VARの IMGS =のdocument.getElementById（" コンテンツ"）.getElementsByTagName（" IMG " ）; 
　　　　 imgSizer.collate（IMGS）; 　　
}）;