css常见的几种布局优点缺点总结!
页面的布局方式是页面构成的主骨架。
布局的目的主要是提供一种抽象,指导设计和开发人员都能够按照某种规范来简化设计和开发的过程。
1 固宽布局:
固宽布局是一个设定了固定宽度的外包裹,里面的各个模块也是固定宽度而非百分比。
优点:1 设计更加简单,容易制定,
2 不需要min-width,max-width等属性,因为有些浏览器不支持这些属性
缺点:1 对于使用高分辨率的用户,固定宽度布局会留下很大的空白,因此会出现‘黄金比例’,‘三分定律’。综合平衡和其他的设计原则。
2 屏幕分辨率过小时会出现横向滚动条。
3. 某些情况下,可用性低。
2 液态布局(流动布局):
是采用相对于分辨率大小的百分比的方式自适应不同的分辨率布局。
优点: 1 对用户更加友好 ,能够部分自适应用户的设置。
2 页面周围的空白区域在所有分辨率和浏览器下都是相同的,在视觉上更美观。
3 如果设计良好,流动布局可以避免在小分辨率下出现水平滚动条。
缺点: 1 设计者需要在不同的分辨率下进行测试,才能看到最终的设计效果 。
注意:液态布局设计越少依赖图片和困难的技术,就越容易被制作和维护。它能够兼容各种分辨率。使用更为简洁的代码和设计,可以更好的防止,发现和解决兼容问题。
3 弹性布局:
弹性布局能和其他两种主要布局类型(固定宽度布局和流动布局)结合使用。弹性布局是使用em 做为单位布局的。
优点: 1 应用恰当的弹性布局对用户十分友好。页面中所有的元素可以随着用户的偏好缩放。
2 对于同时喜欢流动布局和固定宽度布局的设计师来说,弹性布局是完美的,因为在弹性布局中都能找到.
缺点: 1 正式因为第一个优点,这种布局会产生很大额可用性问题。需要花更多时间理解和测试,让布局适应所有用户。
2 这种布局类型相对于其他两个(流动和固定宽度)更难设计;
4 栅格化布局:
栅格化布局:栅格系统英文为“grid systems”,是一种平面设计的方法和风格。运用固定的格子设计版面布局,能以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。(详情百度)
优点: 1 能大大的提高网页的规范性和可重用性。在栅格系统下,将页面模块的尺寸标准化,这对于大型网站的开发和维护来说,能节约不少成本;
2 基于栅格进行设计,可以让整个网站各个页面的布局保持一致。这能增加页面的相似度,提升用户体验;
3 对于设计师们来说,灵活的运用栅格系统,能做出很多优秀和独特的设计。
5 响应式布局:(略)
6 自适应布局:
7 瀑布流布局: