css - 缩小时站点 'falls apart'

Question

为什么当我大幅缩小时我的网站会“崩溃”？

是否有某些 CSS 属性可以解决这个问题？

这是指向相关网页的链接:

http://www.raycavanaugh.com/per%20word.html

Answer 1

1. 我同意 Diodeus 上面的评论:浏览器缩放从未打算能够在所有分辨率下保持布局。一旦您大幅缩小或放大，大多数网站就会崩溃。

2. 有助于:

   1. 在您的内容周围设置一个固定宽度、居中的包装。例如:放大或缩小此页面
   2. margin: auto; 或 text-align: center 使元素居中而不是静态值
   3. 采用百分比的流体布局样式

其中大部分是应该在设计阶段考虑的问题，并且与浏览器窗口重新调整大小时应该发生的情况有很大的重叠。如果该站点在各种浏览器宽度下看起来都不错，那么它在放大和缩小时也可能看起来不错(在某种程度上)。

例如:当您在宽或非常窄的浏览器中查看您的网站时，标题看起来很奇怪。我建议添加:

#menu-container {
    width: 700px;
    margin: auto;
}

或者在内容周围放置某种“框架”。