css - コンテンツが押し出されずにページの周りに余白を確保する方法

Question

最小幅が 1000px で最大幅が 1200px のやや流動的なサイトが必要です。誰かがこれを行う方法を教えてくれるか、チュートリアルを教えてもらえますか?

私が抱えていた問題は、本文に 10 ピクセルのマージンを与えると、ページにあるものはすべて、ページの右側から 10 ピクセル押し出されるということでした。これを修正するにはどうすればよいですか?

Answer 1

border-boxあなたの要素にプロパティを追加します。これにより、要素に配置する境界線、マージン、またはパディングに関係なく、指定した幅が常に生成されます

#element{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
min-width:1000px;
max-width:1200px;
}

Answer 2

これは、流動的で固定されたレイアウトの Web サイトを作成するための CSS を確認するのに役立つ 1 つの優れた Web サイトです。

http://csslayoutgenerator.com/

10px の余白の問題に関しては、私が作成したテスト フィドル(ここをクリック)があります。その中の問題は何ですか？

css-

body
{
    margin:10px;
    min-width:400px; 
    max-width:450px;
}
#test
{
background-color:yellow;
}

Answer 3

マージンを適用する場合は、幅が特定の値を超える場合にのみ、メディア クエリを使用できます。

@media screen and (min-width: 1200px) {
    margin:10px;
}