静态网页设计制作中的布局模式

一、静态布局（Static Layout）

即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。

1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。

2、设计方法：

PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap或m。

在移动端开发中采用静态布局的两种方式：

（1）在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见前端开发-web app 变革之rem）

（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。

优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。

缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。

二、流式布局（Liquid Layout）

流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。

网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用），例如，设置网页主体的宽度为80%，min-width为960px。也作类似处理（width:100%, max-width一般设定为本身的尺寸，防止被拉伸而失真）。

1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示

2、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

三、自适应布局（Adaptive Layout）

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

1、布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

2、设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

四、响应式布局（Responsive Layout）

随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+d性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

响应式几乎已经成为优秀页面布局的标准。

1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

2、设计方法：媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

优点：这种方式的在APP用户体验改进了很多，尤其在连续切换时其 *** 作方式的连续性比较强，主体页面的过渡也更加平滑，会产生更加流畅的体验。

缺点：一次滑动只能切换到相邻的类别，要想直接切换到对应类别可以点击上方的类别列表，不过由于类别过多，有时候可能需要滑动一下类别列表才能完成 *** 作。

1，表格布局，比较传统的布局方法，特点：简单易学，所见所得；不足之处：如果网页内容复杂，表格嵌套就会太多，结构复杂。 2，层布局，比较主流的布局方法，特点：内容与形式分离，结构清晰；不足之处：布局设计工作比较繁重

使用DIV比使用TABLE在布局上更加灵活，而且便于日后维护。

用例子来说。

如果一个网页本来是分3部分，A部分在左，B部分在右上，C在右下。

┌—┐┌——————————┐

│ ││ B │

│ A │└——————————┘

│ │┌——————————┐

│ ││ C │

└—┘└——————————┘

使用table定位，html代码如下：

<table>

<tr><td rowspan='2'>A</td><td>B</td><tr>

<tr><td>C</td><tr>

</table>

使用div定位，html代码如下：

<div class='areaA'>A</div>

<div class='areaB'>B</div>

<div class='areaC'>C</div>

需要CSS定义3个DIV的位置和高度宽度。

某天网页改版，变成了三个部分从左到右排列。

┌———┐┌———┐┌———┐

│ ││ ││ │

│ A ││ B ││ C │

│ ││ ││ │

│ ││ ││ │

└———┘└———┘└———┘

使用table定位，html代码如下：

<table>

<tr><td>A</td><td>B</td><td>C</td><tr>

</table>

当然如果你给CSS中设置的关于这三个区域的高度宽度等也要更改CSS文件。

使用CSS定位html代码不需要更改，需要更改的是CSS文件中的DIV定位方式和三个区域高度宽度。

从这个看起来好像使用DIV并没有比使用表格方便多少，但是我们一般使用的页面内容比这个多，ABC每个区域里都有许多内容，这些内容也需要做布局，所以需要很多表格套表格。这样要改动起来HTML文件里的变动就很大，一不小心删错代码整个布局就要出问题。而使用DIV，在你html写得比较规范的情况下，只需要改CSS文件，设置每个部分的CSS样式即可。

给你一个比较好的例子：CSS禅意花园（链接见参考资料，这是个英文网站，点击select a design下面的超链接可以切换CSS），网站只有一个HTML页面，但是有几百个CSS文件，点击超链接可以切换该网页使用的CSS文件。切换了CSS后页面的样子完全变了，变成另外一个迥然不同的风格，文字的位置也全部发生了变化。

如果像以前那样用table来排版，想要做出这种完全不同的风格你就只能重新给网页布局。