私はWebデザインの初心者です.HTMLとCSSを使用してページを開発しました。私は私のページのスタイリングは、ウィンドウのサイズに応じて同じままにブラウザをサイズ変更するたびに私の静的なページを応答するように変換したい。私の体の幅と高さは です。私が再サイズブラウザウィンドウを試みた時はいつでも静的なページに応答する
body{
width:100%;
height:100%;
margin:0%;
background-color:white;
}
今私のページのスタイリングは、お互いに崩壊しているsame.div残っていません。
私のページを反応させるための簡単なヒントを教えてください。
応答性は "body"タグに依存するだけではありません。それぞれのcss divはあなたの応答性に合っている必要があります。 応答性のために@mediaクエリを使用する方がいいです。
アダプティブレイアウト（応答レイアウト）次の三つの要素から構成されています
1.柔軟なレイアウト：あなたのWebページのレイアウトを作成するために使用
のdiv要素は、相対的な長さで構成されてする必要があります単位。 これは、CSSで固定幅を使用するのではなく、パーセンテージを使用することを意味します。
パーセントまで設計からサイズを変換するための式は、
は、上記の設計の例として、写真を撮ることができます結果= （ターゲット/コンテキスト）×100です。左側のdiv要素のサイズは次のように計算されるために何が起こっているかを計算するには、次の （300ピクセル/ 960ピクセル幅）×100 = 30.25パーセント
CSSは次のようになります。
.leftDiv
{
width: 30.25%;
float: left;
}
.rightDiv
{
width: 65%;
float: left;
}
をテキストは自動的にリサイズするために、あなたはこのテキストを自動的にビューの幅を基準にサイズを変更することを保証VW（ViewWidth）と呼ばれる単位
.myText
{
font-size: 1vw;
}
を使用することができます。
2.Flexibleメディア：
柔軟なメディアは、自動的にその親に対する相対サイズを変更する画像、ビデオ、キャンバスに適用されます。
例：
img, video, canvass
{
max-width: 100%;
}
これは、これらの要素は、その親の内部で自動的にリサイズすることを保証します。
3.メディアクエリ：
次のステップは、あなたの質問にやったようにメディアクエリを使用することで、これらのメディアクエリは、特定の画面サイズのため、特定のCSS文を定義します。私は通常、コンピュータ画面、タブレット、および電話画面に対して3つのメディアクエリしか使用しません。 フレキシブルレイアウトとフレキシブルメディアは、正しく実行された場合、相対的なサイズ変更を保証するため、これ以上必要はありません。
あなたは、これが役に立つかもしれません：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
出典：ブートストラップを使用してHere
を使用すると、応答性のウェブサイト
body {
background-color: lightpink;
}
@media screen and (max-width: 420px) {
body {
background-color: lightblue;
}
}<body>
<p>If screen size is less than 420px, then it will show lightblue color, or else it will show light pink color</p>
</body>
最も簡単な方法は、[bootstrap]（http://getbootstrap.com/）、[foundation]（http://foundation.zurb.com/）、[MDL]（https：/など）などのUIフレームワークを使用することです。 /www.getmdl.io/）。 –
私のアドバイスは、レスポンシブルウェブデザインに関する書籍を読むことです。独自のテンプレートが必要な場合。そうでなければ、Awakening Byte :-)が –
のコード出力と修正の誤植 –