淘宝运营培训视频教程广州营销优化
一、首先看下固定布局与流体布局的区别
（一）固定布局
固定布局的网页有一个固定宽度的容器，内部组件宽度可以是固定像素值或百分比。其容器元素不会移动，无论访客屏幕分辨率如何，看到的网页宽度都相同。现代网页设计中，960 像素宽度较为常见，因为多数用户屏幕分辨率在 1024x768 及以上。
（二）流体布局
流体布局（又称液态布局）中，多数组件宽度使用百分比设置，会根据用户屏幕分辨率自动调整。虽然部分设计师可能会为某些元素（如边距）设置固定宽度，但整体布局以百分比宽度为主。
二、固定网页设计
（一）优点
- 易于使用和定制设计。
- 各浏览器宽度一致，处理固定宽度的图像、表单、视频等内容更方便。
- 无需考虑 min-width 和 max-width 属性（部分浏览器不支持）。
- 即使为最小屏幕分辨率（800x600）设计，在高分辨率下内容也足够清晰可读。
（二）缺点
- 对于高分辨率用户，可能产生过多空白，破坏设计原则。
- 小分辨率屏幕可能需要水平滚动条。
- 需使用无缝纹理、图案和图像来适应高分辨率。
- 可用性评分通常较低。
（三）应对固定布局缺点的技巧
- 参考统计数据：多数设计师认为多数用户屏幕分辨率在 1024x768 及以上，但实际情况并非完全如此。虽不同统计来源数据有差异，但 800x600 分辨率用户占比相对较小。多数设计师选择 960 像素（适合 1024x768 及更高分辨率）或 760 像素（兼顾 800x600 分辨率和大屏幕）的固定宽度。
- 居中布局：使用固定宽度设计时，将容器 div 居中（如使用
margin: 0 auto;），以保持页面平衡，避免在高分辨率屏幕下布局偏居一角。
三、流体网页设计
（一）优点
- 更用户友好，能适应用户设备设置。
- 各浏览器和屏幕分辨率下的额外空白量相似，视觉效果更好。
- 设计良好时，可消除小分辨率屏幕的水平滚动条。
（二）缺点
- 设计师对用户看到的内容控制较少，可能因自身屏幕分辨率忽略问题。
- 固定宽度的图像、视频等内容可能需要设置多种宽度以适应不同分辨率。
- 高分辨率下，内容不足可能产生过多空白，影响美观。
（三）解决方案：优化流体布局的方法
- 采用简洁设计：减少对图形和复杂技术的依赖，使代码和设计更简洁，便于创建、维护，且能更好兼容不同分辨率。
- 使用 min-width 和 max-width 属性：可在用户屏幕过小或过大时创建固定宽度，让布局像固定布局一样显示滚动条。但多数 IE 浏览器不支持，可通过 IE 特定表达式解决。
四、弹性盒子
弹性设计使用 em 作为单位设置所有元素大小。em 是基于字体大小的相对单位，能响应用户文本大小偏好。
（一）优点
- 若实现得当，非常用户友好，元素可按用户偏好等比例缩放。
- 融合了固定和流体布局的优点，适合喜欢这两种布局的设计师。
（二）缺点
- 可用性方面可能存在大问题，需要大量技巧和测试才能适用于所有用户。
- 比其他两种布局更难创建，其带来的额外可用性可能并不值得。
- 部分弹性设计可能需要针对 IE6 的补充样式表和技巧。
（三）补充
弹性布局和流体布局外观相似，但弹性布局主要依赖字体大小用 em 设置，会根据用户浏览器设置的文本大小调整。
五、如何选择适合的布局
选择固定或流体布局取决于网站类型。作品集网站通常更适合固定布局，便于设计师控制设计和处理图像。追求 100% 兼容性的设计师可选择流体布局，尽管要应对小部分低分辨率用户，但对于受众广泛的网站，简单干净的流体布局能有效满足需求。若难以抉择，弹性或部分弹性设计也是不错的选择，可结合rem、百分比和像素宽度设置布局元素。