一、首先看下固定布局与流体布局的区别

（一）固定布局

固定布局的网页有一个固定宽度的容器，内部组件宽度可以是固定像素值或百分比。其容器元素不会移动，无论访客屏幕分辨率如何，看到的网页宽度都相同。现代网页设计中，960 像素宽度较为常见，因为多数用户屏幕分辨率在 1024x768 及以上。

（二）流体布局

流体布局（又称液态布局）中，多数组件宽度使用百分比设置，会根据用户屏幕分辨率自动调整。虽然部分设计师可能会为某些元素（如边距）设置固定宽度，但整体布局以百分比宽度为主。

二、固定网页设计

（一）优点

1. 易于使用和定制设计。
2. 各浏览器宽度一致，处理固定宽度的图像、表单、视频等内容更方便。
3. 无需考虑 min-width 和 max-width 属性（部分浏览器不支持）。
4. 即使为最小屏幕分辨率（800x600）设计，在高分辨率下内容也足够清晰可读。

（二）缺点

1. 对于高分辨率用户，可能产生过多空白，破坏设计原则。
2. 小分辨率屏幕可能需要水平滚动条。
3. 需使用无缝纹理、图案和图像来适应高分辨率。
4. 可用性评分通常较低。

（三）应对固定布局缺点的技巧

1. 参考统计数据：多数设计师认为多数用户屏幕分辨率在 1024x768 及以上，但实际情况并非完全如此。虽不同统计来源数据有差异，但 800x600 分辨率用户占比相对较小。多数设计师选择 960 像素（适合 1024x768 及更高分辨率）或 760 像素（兼顾 800x600 分辨率和大屏幕）的固定宽度。
2. 居中布局：使用固定宽度设计时，将容器 div 居中（如使用margin: 0 auto;），以保持页面平衡，避免在高分辨率屏幕下布局偏居一角。

三、流体网页设计

（一）优点

1. 更用户友好，能适应用户设备设置。
2. 各浏览器和屏幕分辨率下的额外空白量相似，视觉效果更好。
3. 设计良好时，可消除小分辨率屏幕的水平滚动条。

（二）缺点

1. 设计师对用户看到的内容控制较少，可能因自身屏幕分辨率忽略问题。
2. 固定宽度的图像、视频等内容可能需要设置多种宽度以适应不同分辨率。
3. 高分辨率下，内容不足可能产生过多空白，影响美观。

（三）解决方案：优化流体布局的方法

1. 采用简洁设计：减少对图形和复杂技术的依赖，使代码和设计更简洁，便于创建、维护，且能更好兼容不同分辨率。
2. 使用 min-width 和 max-width 属性：可在用户屏幕过小或过大时创建固定宽度，让布局像固定布局一样显示滚动条。但多数 IE 浏览器不支持，可通过 IE 特定表达式解决。

四、弹性盒子

弹性设计使用 em 作为单位设置所有元素大小。em 是基于字体大小的相对单位，能响应用户文本大小偏好。

（一）优点

1. 若实现得当，非常用户友好，元素可按用户偏好等比例缩放。
2. 融合了固定和流体布局的优点，适合喜欢这两种布局的设计师。

（二）缺点

1. 可用性方面可能存在大问题，需要大量技巧和测试才能适用于所有用户。
2. 比其他两种布局更难创建，其带来的额外可用性可能并不值得。
3. 部分弹性设计可能需要针对 IE6 的补充样式表和技巧。

（三）补充

弹性布局和流体布局外观相似，但弹性布局主要依赖字体大小用 em 设置，会根据用户浏览器设置的文本大小调整。

五、如何选择适合的布局

选择固定或流体布局取决于网站类型。作品集网站通常更适合固定布局，便于设计师控制设计和处理图像。追求 100% 兼容性的设计师可选择流体布局，尽管要应对小部分低分辨率用户，但对于受众广泛的网站，简单干净的流体布局能有效满足需求。若难以抉择，弹性或部分弹性设计也是不错的选择，可结合rem、百分比和像素宽度设置布局元素。