如何防止网页布局破坏

Question

我有一个网页，其中包含以下布局：http://jsfiddle.net/h9Nn3/6/，只要用户的浏览器足够宽（超过700像素左右），它看起来就像我想要的那样，但是如果它比它更薄则启动让所有混乱，如果浏览器只有一半的屏幕，这看起来很糟糕。解决这个问题的最佳方法是什么？

我认为最好的事情是如果物品只是向下移动而不是重叠。

Answer 1

您可以使用min-width，@anjunatl指出，或者您可以使用CSS3 media queries。

他们让你调整你想要的任何分辨率范围的CSS：

body {
  color: red;
}

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

当用户的浏览器宽度小于700px时，新的CSS将生效并覆盖旧的CSS。您可以使用此功能，并通过在媒体查询块中添加新规则来基本修复您在网站上找到的任何错误。这样，它们只会以正确的分辨率显示和修复布局。

Answer 2

将此CSS添加到正文标记：min-width: 700px;