网站制作时如何处理好固定宽度与响应式布局

网页布局可以通过两种不同的方式完成：

固定宽度布局：这些布局使用特定的数值设置整个页面的宽度。

响应式布局：这些布局的整个页面的宽度是灵活的，这取决于浏览器的宽度。

使用这两种布局方法都有很好的理由，但是如果不了解每种方法的相对优点和缺点，就不能很好地决定将哪种方法用于Web页面。两种方式都可以实现网页排版布局，那么在网站设计和网站制作时该如何选择呢？或者说，网站制作时如何处理好固定宽度与响应式布局呢？

固定布局是由Web设计器确定的以特定大小开始的布局。无论查看页面的浏览器窗口的大小如何，它们都保持该宽度。固定宽度布局允许设计者更直接地控制页面在大多数情况下的外观。它们通常是具有打印背景的设计人员的首选，因为它们允许设计人员对布局进行微小的调整，并使它们在浏览器和计算机之间保持一致。

是基于当前浏览器窗口大小的百分比的布局。它们根据窗口的大小进行调整，即使当前的浏览器在查看站点时改变了浏览器的大小。响应式宽度布局允许非常有效地利用任何给定的Web浏览器窗口或屏幕分辨率所提供的空间。它们通常是那些在尽可能小的空间内获得大量信息的设计者的首选，因为无论谁在查看页面，它们在大小和相对页面权重上都保持一致。

固定宽度的布局允许设计人员构建外观相同的页面，无论是谁在查看它们。固定宽度的元素(如图像)不会在较小的显示器上压倒文本，因为整个页面的宽度将包括这些元素。无论Web浏览器有多宽，扫描长度都不会受到较大文本段的影响。

响应式宽度布局将展开并收缩以填充可用空间。所有可用的房地产都被使用，允许设计师在较大的显示器上显示更多的内容，但在较小的显示器上仍然可行。响应式布局提供了相对宽度的一致性，使页面能够更动态地响应客户施加的限制，如较大的字体大小。

固定宽度布局可能导致在较小的浏览器窗口中进行水平滚动。大多数人不喜欢水平滚动。它们还会在较大的监视器中产生大量空白，从而导致大量未使用的空间和超出所需的垂直滚动。固定宽度布局不能很好地处理客户对字体大小的更改。对于字体大小的少量增加，它们可能是可以的，但对于较大的增加，布局可能会受到影响。

响应式布局几乎不能精确控制页面的各个元素的宽度。它们可能导致文本列太宽而无法轻松扫描，或者在较小的浏览器上太小，无法清晰显示单词。当固定宽度的元素(如图像)放置在液柱内时，响应式布局可能会出现问题。如果显示的列没有足够的图像空间，则某些浏览器将增加列宽度，而不考虑设计器的说明，而其他浏览器将导致文本和图像重叠，以达到正确的百分比。

许多网站有大量的信息，他们需要在尽可能小的空间内传达，将与响应式布局很好地工作。这使他们能够利用更大的显示器提供的所有房地产，而不是短路较小的显示器。需要精确控制页面在每种情况下的外观的站点最好使用固定宽度的布局。这提供了更多的保证，无论您的网站在什么大小的显示器上查看，它的品牌都是一致和清晰的。

许多人喜欢混合的方法。他们不喜欢对大文本块使用液态布局，因为这会使文本在小屏幕上不可读或在大屏幕上不可扫描。因此，它们倾向于使页面的主列具有固定的宽度，但使页眉、页脚和侧栏更灵活，以占用剩余的空间，并且不会失去较大浏览器的容量。有些站点使用脚本来确定浏览器窗口大小，然后相应地更改显示元素。例如，如果您在一个非常宽的窗口中打开这样的站点，您可能会在左侧看到一列额外的链接，而使用较小监视器的客户可能看不到这些链接。此外，围绕广告的文本环绕取决于您的浏览器窗口有多宽。如果它足够宽，站点将在其周围环绕文本，否则，它将在广告下面显示文章文本。虽然大多数网站不需要这样的复杂程度，但它展示了一种利用大屏幕而不影响小屏幕上的显示的方法。