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

Question

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

a）在窗口调整大小

下布局应该是健壮的

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

每次我设计页面布局时，我最终都会使用不同的ad-hoc方法在上面的a）和b）中使页面健壮。我之前使用过的一些方法是：

• 处理正文onresize（）
• 以％表示所有值（当必须在px中定义图像尺寸时，这会卡住）
• 将div放置在-10,000像素并定期轮询以检查字体大小调整（喘气！）

我发现上述方法非常糟糕，并且很乐意为这个问题找到标准的，可靠的方法。我相信其他人每天都会面对（并解决）这些问题。

Answer 1

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

Answer 2

所有液体页面都会混合使用视口相对大小和固定像素大小（正如您所指出的那样，图像和其他必须调整大小以匹配图像的元素）。您可能还需要某些元素的固定大小。

因此，一种常见的方法是，在右侧绝对定位固定宽度的侧边栏，并为主体文本提供等于该宽度的右边距。有很多方法可以实现这些类型的布局 - 请参阅关于'液体CSS列'的无尽帖子。

在最复杂的情​​况下，单独的CSS无法为您提供所需的相对和绝对的组合，总是有表格。不理想，但通常比依赖JavaScript的布局更好。

Answer 3

如果您正在寻找更具体的布局解决方案，我想说现在常见的做法是使用预先构建的网格布局。有fixed width和fluid versions，两者都会随用户的字体大小而增加。 YUI也有一个。没有JS，没有屏幕外的东西。

但我也看到用户在浏览器中缩放文本的引用。这不是以前的问题。以前你必须要非常小心 - 如果你把文本放在％中它会扩展，但px在某些浏览器中不会。现在，所有浏览器都将页面整体扩展，包括文本和图像 - 彼此成比例。文本大小调整非常类似于您在页面上“放大”，因为图像也会增长。您可以在“完整大小”模式下以px（或％或pt或其他）方式测量文本和列宽，并且浏览器可以很好地调整。