网站界面类型有哪些流动布局和响应式布局

固定网页布局是指网站内容被一个固定宽度的容器包裹，容器内的区块以像素作为页面的基本单位，只需设计一套尺寸，也只展现一种布局。固定网页布局不管用户使用的是PC端还是移动端，也不管屏幕分辨率如何变化，大家看到的都是固定宽度的内容。

不足：不能根据用户的屏幕尺寸做出不同的表现，大屏幕上会出现大量空白，而小屏幕上可能会出现水平滚动条影响用户体验。

如旺旺集团的官网采用了该布局方式，其二级页面固定宽度布局为1093像素，无论用哪种设备浏览该网站，其布局都不变，可是用手机查看时网站时界面却未能全部显示完整。

流动布局

流动网页布局是将大多数组件（包括主容器）都以百分比的形式作为页面的基本单位，根据用户的屏幕分辨率自适应，完美地利用有效空间展现最佳效果。使用这种布局方式，无论终端分辨率尺寸如何变化，网页都能自适应宽度。不过，单纯地使用流动布局的页面比较少见，它可以搭配固定布局的局部功能使用，还可以为响应式布局提供局部版式的自适应。

不足：宽度使用百分比定义，而高度和文字大小等大都是用px来固定，在较大分辨率下的显示效果会变成有些页面元素宽度被拉得很长，但是高度、文字大小还是和原来一样（即这些东西无法变得“流式”），显得非常不协调。

如国外某后台管理界面布局上就结合了固定布局与流动布局两种方式：其左侧全局导航固定宽度为235像素；右侧内容区域则运用了百分比的形式来控制各元件的宽度，最终保证了不同分辨率设备上视觉空间的均衡布局。

响应式布局

响应式网页布局，是分别为不同的屏幕分辨率终端所定义的布局。其布局原理是网页根据屏幕或浏览器的宽度选择最合适的那套进行布局，同时在每个布局中应用流式布局的理念，让页面元素宽度随着窗口调整而自动适配。

不足：一是由于代码素材多，导致加载速度慢；二是响应式布局适用的网站类型有限。由于它的特点是适应不同终端、不同尺寸屏幕分辨率上的信息版式布局。由于图片、文字信息的栅格响应比较容易，因此响应式布局比较适用于内容较少、结构简单的公司活动宣传网站，而不适用于内容、功能复杂的电子商务类网站等。

如星巴克官网就使用了响应式网页布局，即便是使用不同的终端、改变浏览器的宽度，其页面版式也会通过字段自动换行，图片自适大小变化而呈现出与设备宽度匹配的最佳状态。这种因宽度判断的不同界面布局自适应地改变的节点被叫作断点。目前大多网站选择响应式断点的设计模式，主要有基于设备和内容优先两种。

第一种基于设备的模式是通过主流设备的类型及尺寸来确定布局断点，从而设计多套样式，再分别投射到响应的设备。如你的页面主要兼容的设备为手机、平板、桌面电脑3种，那么就需要根据主流手机分辨率尺寸设置两个断点。下图中设置的断点是720像素与990像素，即若你的屏幕宽度小于720像素的将会出现A的版式，而当宽度大于等于720像素且小于990像素的将会出现B的版式，大于990像素则会显示C的版式。

第二种基于内容优先的模式是根据内容的可读性、易读性作为确定断点的标准，下图从小到大共设计了A、B、C、D 4种版式，在对内容进行布局设计的时候，我们首先是基于内容来决定何时需要采用不同的呈现方式，再参考设备的物理尺寸，最终确定断点数值分别为360像素、720像素、1080像素。