使布局与窗口调整大小以及字体调整大小兼容的方法

Question

是否有良好的咨询/最佳实践手册等，其中概述了通过以下两种方式使页面布局流畅的方法：

a）在窗口调整大小的情况下布局应稳健

b）布局应无缝处理用户提交的字体大小调整

每次我设计页面布局时，最终都会使用不同的临时方法来使页面在上述a）和b）下都更稳定。 我以前使用过的一些方法是：

• 处理主体onresize（）
• 以％声明所有值（当图像尺寸必须以px为单位时会卡住）
• 将div放置在-10,000 px处并间隔轮询以检查字体大小（gasp！）

我发现上述方法非常糟糕，很想找到解决此问题的标准，鲁棒方法。 我相信这里的其他人每天都会面对（并解决）这些问题。

Answer 1

设计网页就像为一大群人做饭一样。 总会有人不喜欢您的烹饪。 您需要做的是设计一种能让大多数访客满意的方式。

Answer 2

所有液体页面都将具有相对于视口的尺寸和固定像素的尺寸（如您所指出的，图像以及必须调整大小以匹配图像的其他元素）。 您可能还需要某些元素的固定em大小。

因此，一种常见的方法是，例如，将固定宽度的侧边栏绝对定位在右侧，并为主体文本提供与该宽度相等的右边界。 实现这种布局的方法很多，请参见有关“液态CSS列”的无数文章。

在最复杂的情​​况下，仅CSS不能提供所需的相对和绝对组合，因此总会有表。 这并不理想，但通常比依赖JavaScript的布局更好。

Answer 3

如果您正在寻找更具体的布局解决方案，那么我想说，如今，一种常见的做法是使用预先构建的网格布局。 有固定的宽度和流畅的版本 ，两者都随用户的字体大小扩大。 YUI也有一个。 没有JS，没有屏幕外的东西。

但我也看到了有关用户从其浏览器中缩放文本的参考。 这不是以前的问题。 过去，您必须非常小心-如果以％放置文本，它将可以缩放，但是在某些浏览器中不会显示px。 现在，所有浏览器都将页面整体放大，包括文本和图像-彼此成比例。 文字大小的调整实际上就像您在页面上“放大”一样，随着图像的增长。 您可以在“完整大小”模式下简单地以px（或％或pt或其他任何值）测量文本和列的宽度，浏览器可以很好地进行调整。