如何防止网页布局破坏

Question

我有一个具有以下布局的网页：http://jsfiddle.net/h9Nn3/6/，只要用户的浏览器足够宽（超过700px左右），但它看起来完全像我希望它，但如果它比那更薄它开始让所有的混乱，如果浏览器只有一半的屏幕有点正常，那么它看起来很可怕。解决这个问题的最好方法是什么？

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

Answer 1

这个CSS添加到身体标记：min-width: 700px;

Answer 2

您可以使用min-width，作为@anjunatl指出，也可以使用CSS3 media queries。

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

body { 
    color: red; 
} 

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

当用户的浏览器是小于700像素宽，新的CSS被付诸实施，将覆盖旧的CSS。您可以使用它来获得优势，并通过向媒体查询块中添加新规则来基本修复您在网站上发现的任何错误。这样，他们只能以正确的分辨率显示并修正布局。