带您了解15种常规的网页布局设计
常见的网页布局设计有以下几种：
1. 静态布局
- 特点：网页上的所有元素尺寸一律使用像素（px）作为单位，不管浏览器尺寸如何，页面都按照最初写代码时的布局显示。常规的PC端网站常采用这种布局，如设置了min-width，小于该宽度会出现滚动条，大于则内容居中外加背景。
- 设计方法：在PC端，居中布局，样式使用绝对宽度/高度；移动设备则另外建立移动网站，单独设计布局。
- 优点：对设计师和CSS编写者来说简单，无兼容性问题。
- 缺点：不能根据用户屏幕尺寸做出不同表现，不是完全兼容未来网页的制作方法。
2. 流式布局
- 特点：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作是栅栏系统（网格系统），主要划分区域的尺寸使用百分数（搭配min-、max-属性使用）。
- 设计方法：使用%百分比定义宽度，高度大都用px来固定，可配合max-width/min-width等属性控制尺寸流动范围。
- 优点：能适应一定范围内的屏幕尺寸变化，在PC前端开发早期及移动端开发常用。
- 缺点：如果屏幕尺度跨度太大，在大屏幕手机下显示效果可能不协调，因为宽度用百分比定义，而高度和文字大小等大都是用px来固定。
3. 自适应布局
- 特点：分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，改变屏幕分辨率时页面元素位置会变化，但大小不会变。
- 设计方法：使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。
- 优点：可以为适配范围内的设备提供较好的体验，在同一个设备下实际是固定的布局。
- 缺点：需要为不同设备准备多个版本的布局，工作量较大。
4. 响应式布局
- 特点：确保页面在所有终端上都能显示出令人满意的效果，糅合了流式布局+弹性布局，再搭配媒体查询技术使用，每个屏幕分辨率下面都有一个布局样式，元素位置和大小都会变。
- 设计方法：通常使用@media媒体查询和网格系统配合相对布局单位进行布局。
- 优点：能适应PC和移动端等多种设备，效果较好。
- 缺点：媒体查询是有限的，只能适应主流的宽高；要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
5. 弹性布局（rem/em布局）
- 特点：使用em或rem单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。
- 设计方法：使用em或rem单位定义尺寸，常需设置根节点html的字体大小以方便计算。
- 优点：更能适应缩进、padding或margin以及浏览器设置字体尺寸等情况，在移动端也很受欢迎。
- 缺点：早期浏览器对整个页面按比例缩放的支持不佳，仅支持网页内文字尺寸的放大。
总之，以上每种网页布局设计都有其独特的特点和适用场景。在实际的网页设计中，应根据项目的具体需求、目标受众以及设备的多样性来选择合适的布局方式，以确保网页在各种情况下都能呈现出良好的视觉效果和用户体验。
