静态、自适应、流式、响应式四种网页布局有什么区别？

　　静态布局(Static Layout)

　　即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分;

　　对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。

　　自适应布局(Adaptive Layout)

　　自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。

　　你可以把自适应布局看作是静态布局的一个系列。

　　流式布局(Liquid Layout)

　　流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

　　响应式布局(Responsive Layout)

　　分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。

　　可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

　　机缘巧合认识了一位前端大拿，给我好好上了一课，终于能这两种网站前端表现形式给讲透了。现摘录如下：

　　1、响应式网站由来

　　最开始网站都会被设计成固定宽度的页面，最开始的PC显示器的分辨率种类不多，因为当时电脑本来就少，即使有变化也是 800、900、1050、1200等几种。比如 GitHub的网页就是固定宽度为1020px来定制的。

　　后来随着显示器越来越多，以及笔记本的普及，这种方式的页面出现了问题。在大屏显示器上整个页面显的特别小，在小屏显示器上网页又出现滚动条导致用户体验极其的差。为了解决在各种不同大小和分辨率的设备上如何正确显示网站的问题，前前后后也出现了好多种方案。

　　提供不同版本：最开始的解决方法，是为不同的设备提供不同版本的网页。比如一个站点为PC、Mobile、Pad提供三个不同的版本。这样做固然保证了效果，但同时要维护好几个版本比较麻烦，而且网站有多个入口，会大大增加系统架构的复杂度。

　　自适应：后来人们就开始想能不能"一次设计，普遍适用"，即让同一个页面自动适应不同大小的设备，从而解决为不同设备提供不同版本的页面问题。这就是所谓自适应布局解决方案。

　　响应式： 采用自适应布局的话，如果设备太小，就算网页能够根据屏幕大小进行适配，但是在太小屏幕显示内容过多会看不清楚。为了解决这个问题而衍生出来的一种新的布局方式，那就是响应式布局。

　　2、响应式和自适应的区别

　　先给出两个具体例子让大家直观感受一下两种的效果：

　　响应式网站：https://www.microsoft.com/zh-cn/

　　自适应网站：http://m.ctrip.com/html5/

　　响应式和自适应两种布局方式都是为了解决在不同大小和分辨率的设备上正确显示网页的问题。不同的是两种布局方式采取了不同的解决方法而矣。

　　最开始出现的一种新的布局方式其实是宽度自适应布局。我们平时谈论的自适应布局，大部分时候指的就是宽度自适应布局。 自适应是为了解决如何才能在不同大小和分辨率的设备上呈现同样的网页。在网页内容和布局主体保持基本不变的前提下，让同一张个页面自动适应不同大小和分辨率的设备，根据设备屏幕宽度，自动调整网页内容大小。 如下图所示：

　　自适应布局：网页内容和布局完全一样

　　从上图可以看出采用自适应布局的话，不管设备屏幕尺寸如何变化，打开同一个页面看到的内容和布局基本上是一样的，不同的只是内容的尺寸。

　　这样就会引发一个问题，那就是如果设备太小，就算网页能够根据屏幕大小进行适配，但是在太小屏幕显示内容过多会看不清楚，从而极大损害用户体验。

　　响应式布局正是为了解决这个问题而衍生出来的一种新的布局方式。它可以自动识别屏幕尺寸并做出相应调整的网页设计，页面布局和展示的内容可能会随着屏幕尺寸变化而有所变化。如下图所示：

　　响应式布局：网页内容和布局随着屏幕尺寸变化而变化

　　网络上也有网友用这么一张图来总结响应式和自适应的区别：

　　如上图所示，对于同一个页面(图中的Html)，如果用响应式布局来处理的话，用不同设备(电脑、平板、手机)去访问此页面，最后看到的布局和内容有很大不同。

　　而如果用自适应布局去处理的话，那不管访问设备如何的不同(上图是三台尺寸不一样的手机)，最后看到的页面内容和布局基本上还是一样的，就是尺寸略有不同。

　　进一步详细说明，如下图所示，屏幕宽度大于720像素，则4张图片并排在一行：

　　如果屏幕宽度在不大于720像素，则4张图片分成两行：

　　如果屏幕宽度在小于600像素话，网站主导航由平铺变成了下拉：

　　其实响应式和自适应两种布局方式从外观上很难分辨，但从技术角度来说他们运行的机理不同。所以最后从技术角度再来总结一下两者的区别：

　　响应式布局不管使用什么设备都是在服务器把数据推送到浏览器后，脚本或CSS自行检测设备屏幕大小后执行对应的样式表内容，并且一直通过本地脚本在监听屏幕大小的变化，随时做出样式响应的变化，这是主动的。

　　自适应是用户请求访问时会夹带设备信息，服务器据此做出判断并调适应对应设备样式文件+HTML内容+JS，返回给浏览器以这种方式响应不同设备。

　　一、自适应网站与响应式网站的区别

　　1、自适应网站是使用不同设备浏览时呈现不同的网页，网页内容及版式风格或相似或完全不同，和PC端属于不同的网站模板，数据库内容或相同一致，或独立不同，目的在于为了符合访客的浏览。针对一些优化人员，更习惯于做到数据库同步，使PC端的网址和内容与移动端的网址和内容一一对应。

　　2、响应式网站是使用不同的设备浏览网站时，网站样式风格、内容和网址都是完全一样的，PC端和移动端属于同一个网站模板，数据库完全一致，也非常符合搜索引擎的优化规则。

　　二、自适应网站与响应式网站的好处和弊端

　　1、自适应网站和响应式网站各自的好处

　　自适应网站可以独立设计，做任何自己想要的风格，还可以做到数据库同步，设计方案灵活，可独立优化符合搜索引擎的规则。响应式网站更加方便浏览，能够增加访客的体验度，无需再单独设计制作手机站，PC站即是手机站，对于优化来讲，权重不分散，更加符合搜索引擎的规则。

　　2、自适应网站和响应式网站各自的弊端

　　自适应网站的手机站有时无法做到与PC站内容完全一致，且工作量大，自适应手机站往往使用不同的子域名或目录跳转，对于优化来讲权重分散，访客浏览体验仍有缺陷。响应式网设计往往风格有些局限，对于复杂的框架结构难以实现，制作流程复杂，代码兼容性要求较高。

　　三、如何选择使用自适应网站还是响应式网站

　　1、一般使用自适应网站的手机站主要因为自己在建设手机站之前已经有了PC站，PC站不能做到小屏幕设备适中浏览，又不能进行大改版影响网站优化，故此建设自适应的手机站跳转来实现手机、ipad等符合浏览，手机站数据库一般为同步。成都响应式网站建设我选的成都指尖时代做的服务好 服务专业!

　　2、响应式网站往往是建设新站时设计，之前无PC站或手机，不需要顾及网站优化及数据同步，可设计为响应式网站，响应式网站更加符合访客浏览，增加网站体验度，也更符合网站优化工作。