html - Webページのレイアウト破壊を防ぐ方法

Question

私は次のレイアウトの Web ページを持っています: http://jsfiddle.net/h9Nn3/6/ユーザーのブラウザが十分に広い (700px 以上) 限り、私が望むように見えますが、それが薄い場合それよりも、すべてがごちゃごちゃになり始め、ブラウザが画面の半分しかない場合、それはやや正常であり、ひどく見えます。これを修正する最善の方法は何でしょうか?

アイテムが重なり合うのではなく、単純に下に移動するのが最善だと思います。

Answer 1

@anjunatlが指摘したように、またはmin-widthCSS3メディア クエリを使用できます。

必要な解像度範囲に合わせて CSS を微調整できます。

body {
  color: red;
}

@media screen and (max-width: 700px) {
  body {
    color: blue;
  }
}

ユーザーのブラウザの幅が 700px 未満の場合、新しい CSS が有効になり、古い CSS が上書きされます。これを有利に利用して、基本的に、メディア クエリ ブロックに新しいルールを追加することで、Web サイトで見つかったバグを修正できます。そうすれば、それらは適切な解像度でのみ表示され、レイアウトが修正されます。

Answer 2

この CSS を body タグに追加します。min-width: 700px;