html - 如何防止网页布局破坏

Question

我有一个具有以下布局的网页：http: //jsfiddle.net/h9Nn3/6/只要用户的浏览器足够宽（超过 700 像素左右），它看起来就像我想要的那样，但如果它更薄而不是它开始变得混乱起来，如果浏览器只是屏幕的一半，这有点正常，那么它看起来很糟糕。解决此问题的最佳方法是什么？

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

Answer 1

min-width正如@anjunatl指出的那样，您可以使用，也可以使用CSS3媒体查询。

它们让您可以针对所需的任何分辨率范围调整 CSS：

body {
  color: red;
}

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

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

Answer 2

将此 CSS 添加到 body 标签：min-width: 700px;