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


来源:网站优化外包 作者:坪山网站建设公司 日期:2019-01-28 浏览:

网页布局可以通过两种不同的方式完成:
固定宽度布局:这些布局使用特定的数值设置整个页面的宽度。
响应式布局:这些布局的整个页面的宽度是灵活的,这取决于浏览器的宽度。
使用这两种布局方法都有很好的理由,但是如果不了解每种方法的相对优点和缺点,就不能很好地决定将哪种方法用于Web页面。两种方式都可以实现网页排版布局,那么在网站设计和网站制作时该如何选择呢?或者说,网站制作时如何处理好固定宽度与响应式布局呢?
固定宽度布局
固定布局是由Web设计器确定的以特定大小开始的布局。无论查看页面的浏览器窗口的大小如何,它们都保持该宽度。固定宽度布局允许设计者更直接地控制页面在大多数情况下的外观。它们通常是具有打印背景的设计人员的首选,因为它们允许设计人员对布局进行微小的调整,并使它们在浏览器和计算机之间保持一致。
响应式布局
是基于当前浏览器窗口大小的百分比的布局。它们根据窗口的大小进行调整,即使当前的浏览器在查看站点时改变了浏览器的大小。响应式宽度布局允许非常有效地利用任何给定的Web浏览器窗口或屏幕分辨率所提供的空间。它们通常是那些在尽可能小的空间内获得大量信息的设计者的首选,因为无论谁在查看页面,它们在大小和相对页面权重上都保持一致。
固定宽度布局的优点
固定宽度的布局允许设计人员构建外观相同的页面,无论是谁在查看它们。固定宽度的元素(如图像)不会在较小的显示器上压倒文本,因为整个页面的宽度将包括这些元素。无论Web浏览器有多宽,扫描长度都不会受到较大文本段的影响。
响应式布局的好处
响应式宽度布局将展开并收缩以填充可用空间。所有可用的房地产都被使用,允许设计师在较大的显示器上显示更多的内容,但在较小的显示器上仍然可行。响应式布局提供了相对宽度的一致性,使页面能够更动态地响应客户施加的限制,如较大的字体大小。
固定宽度布局的缺点
固定宽度布局可能导致在较小的浏览器窗口中进行水平滚动。大多数人不喜欢水平滚动。它们还会在较大的监视器中产生大量空白,从而导致大量未使用的空间和超出所需的垂直滚动。固定宽度布局不能很好地处理客户对字体大小的更改。对于字体大小的少量增加,它们可能是可以的,但对于较大的增加,布局可能会受到影响。
响应式布局的缺点
响应式布局几乎不能精确控制页面的各个元素的宽度。它们可能导致文本列太宽而无法轻松扫描,或者在较小的浏览器上太小,无法清晰显示单词。当固定宽度的元素(如图像)放置在液柱内时,响应式布局可能会出现问题。如果显示的列没有足够的图像空间,则某些浏览器将增加列宽度,而不考虑设计器的说明,而其他浏览器将导致文本和图像重叠,以达到正确的百分比。
总结:
许多网站有大量的信息,他们需要在尽可能小的空间内传达,将与响应式布局很好地工作。这使他们能够利用更大的显示器提供的所有房地产,而不是短路较小的显示器。需要精确控制页面在每种情况下的外观的站点***使用固定宽度的布局。这提供了更多的保证,无论您的网站在什么大小的显示器上查看,它的品牌都是一致和清晰的。
许多人喜欢混合的方法。他们不喜欢对大文本块使用液态布局,因为这会使文本在小屏幕上不可读或在大屏幕上不可扫描。因此,它们倾向于使页面的主列具有固定的宽度,但使页眉、页脚和侧栏更灵活,以占用剩余的空间,并且不会失去较大浏览器的容量。有些站点使用脚本来确定浏览器窗口大小,然后相应地更改显示元素。例如,如果您在一个非常宽的窗口中打开这样的站点,您可能会在左侧看到一列额外的链接,而使用较小监视器的客户可能看不到这些链接。此外,围绕广告的文本环绕取决于您的浏览器窗口有多宽。如果它足够宽,站点将在其周围环绕文本,否则,它将在广告下面显示文章文本。虽然大多数网站不需要这样的复杂程度,但它展示了一种利用大屏幕而不影响小屏幕上的显示的方法。
深圳市圣玺网络技术有限公司提供坪山区域的营销网站建设、品牌网站设计、企业网站改版制作、网站优化外包、网络营销推广、百度霸屏、SEO按天按效果付费等互联网广告服务!
本文由网上采集发布,不代表本站立场,转载联系作者并注明出处:http://www.webgaiban.cn/wzyh/1722.html

X

截屏,微信识别二维码

微信号:15019448256

(点击微信号复制,添加好友)

  打开微信