网页的布局方式本质上就是去处理窗口宽度与网页内容的关系，用户会使用浏览器打开不同尺寸的窗口，所以网页内容就需要根据已有的窗口去布局。下面，蓝橙视觉就给大家分享一下网页常用的布局方式，为大家网页UI设计提供一个参考。

1、固定布局

固定布局是一种最为简单的方式，它的设计逻辑是将页面当中的内容 “写死固定” 在屏幕上，内容不会随着本身窗口宽度进行改变，所有元素都使用px作为基础单位。当然在固定布局当中，窗口大小与页面内容会存在两种基本关系：窗口过大则将页面元素进行居中，窗口过小则展示横向滚动条，固定布局的好处是这种方式相对简单，只需将页面设计好即可，不会存在太多兼容性的问题。

2、流式布局

流式布局是最基础的变化布局，它的设计逻辑是将页面当中的元素设计成可以流动的 “水”，通过在页面，设计不同的“杯子”容器来装下页面内容。这里的“水”一般指的是 文字、图标、以及一些页面重复出现的元素。而杯子通常是我们设计的容器，它高度固定，只会变化其宽度，比如卡片、外层容器控制宽度等等...因为“杯子”的限制，也就导致水会根据杯子的宽度进行延展流动，进而形成流式布局。

3、自适应布局

自适应布局是将差别较大的屏幕尺寸，去创建多个不同的设计稿，每一个设计稿去对应 一个用户实际的尺寸范围，改变屏幕分辨率就可以去切换不同的设计方案。自适应是使用多套代码去对应多个页面，并且都是在业务非常复杂的情况下进行使用，在国内当中最常使用便是桌面端与移动端的产品。

4、响应式布局

响应式布局是确保一个页面当中所有的设备（桌面端、平板端、移动端）都能够展示出非常满意的效果，进行产生的一种技术方案。它更像是流式布局与自适应布局的结合，它能够通过对屏幕尺寸的快速响应，进而对页面的内容进行更为细致的变化。通俗一点来说就是通过一套代码去实现多个页面，并且将多个页面的内容进行细化，进而能够快速适配多个设备。

以上就是本次为大家分享的网页布局设计形式，不同的页面设计有着不同的特点，在网页设计费用上也会有所不同，企业可根据自身的网站定位和实际的使用需求，挑选一种最合适的网页布局方式