常用的页面布局形式

目前PC端和移动端的页面设计，采用的是不同的布局形式。没有一种布局形式是万能的，各有利弊，在页面布局时要灵活运用。

静态布局/固定宽度布局

静态布局是最传统、最常见的Web设计方式，也是目前使用最广泛的布局方式。宽度固定，页面中的所有元素都使用固定的px单位，不管屏幕分辨率如何变化，内容都保持不变。页面内容不会随浏览器、屏幕宽度而变化，当内容超过宽度或高度时，会出现横向或竖向滚动体。

优点：这种页面布局方式相对容易实现，不涉及任何兼容性问题，所有单位直接使用绝对单位。

缺点：不能根据屏幕尺寸做变化。

自适应布局

为不同的屏幕单独布局，根据主要用户的分辨率范围创建多个静态布局，每个静态局部适用一定范围的屏幕分辨率。当屏幕分辨率发生变化时，会根据当前分辨率自动切换到范围内的静态布局，但在每个静态布局中，页面元素不随窗口大小的变化而变化。也就是说，你所看到的页面，里面元素的位置会变化但大小不会变化。

流体式布局

页面元素的宽度会根据屏幕分辨率或者浏览器的宽度做适配调整，页面元素的大小会变化而布局不会变化。流体式布局中的宽度使用相对单位百分比（%），高度仍然使用固定单位px。

优点：这种布局方式适用于尺寸差异不大的屏幕，不同安卓机型的屏幕差别不大时依然适用。

缺点：当屏幕太大或者太小时，会导致元素无法正常显示，所以流体式布局一般适用于分辨率差异不大的屏幕。

响应式布局

采用响应式布局的页面会根据不同终端自动适配展示，每个屏幕分辨率下会有一个布局样式，也就是不同屏幕分辨率下的元素位置和大小都可能变化。它融合了流体式布局和自适应布局两种布局类型。如今，响应式布局已成为大型网站良好用户体验的标准，如腾讯、网易、淘宝官网采用的都是响应式布局。

优点：最适合用于解决不同设备之间、不同屏幕分辨率之间的兼容问题。

缺点：对代码编写等技术要求更高。

响应式布局与自适应布局的原理相似，都是先检测设备，根据不同的设备采用不同的CSS。而且CSS都是采用百分比单位，而不是固定的宽度。不同点是，响应式布局的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应布局不会，所有的设备都是采用一套模板，仅是高度或者图片变小了，不会根据设备采用不同的展示样式。

弹性布局（rem/em布局）

弹性布局是使用em或rem单位的一种相对布局方式，相比百分比单位更加灵活，同时支持浏览器调整字体大小及缩放。rem是相对于页面元素中的字号大小，em是相对于父元素的字号大小。这种布局方式是从网站易用性方面考虑的，国外前端技术人员比较重视这种布局方式。目前国内包括门户网站还是使用绝对单位进行布局。

追求更好的舒适性和兼容性，为用户创造最佳体验环境是设计的最终目的。在设计之初，深入了解产品特征，基于用户使用的设备及环境选择好的布局形式。

比较简单方便的布局方式是静态布局，也是比较容易把控的。如果只做PC端，静态布局+自适应布局较便捷；如果做移动端，弹性布局是较好的选择；如果PC端、移动端都要兼容，响应式布局是较好的选择。

计算机和手机是用户量较大的两种设备，产品在设计之初就应该确定主流设备及用户群体，然后根据主流设备做差异化设计。

网页内容要从用户角度出发，关注目标受众人群、产品应用场景及其主流用户的终端设备，尽可能地照顾更多的用户并考虑内容的极佳展示空间和展示方式。先根据用户量大的终端环境选择极佳的内容展示方式，在保证当前体验的前提下，再让页面尽可能地覆盖其他用户的设备环境。

以内容的可读性、易读性作为内容展示标准，即在对内容进行布局设计时，可以先不考虑终端设备，而是根据内容决定何时需要采用不同的呈现方式。通过主流设备的类型及尺寸来确定布局方式，设计多套样式，再分别应用到不同的终端设备。