布局类型解析-优快云博客

概述

1、响应式网站由来

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

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

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

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

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

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

从逻辑角度两者的区别：

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

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

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

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

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

这里写图片描述

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

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

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

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

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

这里写图片描述

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

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

从技术角度再来总结一下两者的区别：

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

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

原来响应式网站和自适应网站是这样来区分的

一、静态布局（Static Layout）固定布局(fixed layout)

这里写图片描述
1、布局特点：

传统Web设计，对于PC设计一个Layout。
网页上的所有元素的尺寸一律使用绝对单位(px)。在不同设备上显示效果不会有不同。
常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景。

2、设计方法：

　　PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
　　移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
　　
3、优点：

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

4、缺点：

　　不能根据用户的屏幕尺寸做出不同的表现。

5、总结

　　固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。

6、示例

这里写图片描述
无论如何change浏览器的宽度，页面主体区域的宽度是固定不变了，里面的内容布局也是打死不动的。

二、流体布局（Liquid/Fluid Layout）

这里写图片描述
1、布局特点：

relative units instead of fixed units.A liquid layout often will fill the width of the page。页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。
屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

2、设计方法：

　　使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
　　例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%,max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

3、优点：

　　在一定程度上可以根据不同分辨率进行适配的布局。
　　
4、缺点：

　　主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。
　　
5、总结

　　这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式。
　　
6、示例
这里写图片描述
当你change浏览器的宽度，显示区域也会如同水流般自适应于显示器的宽度显示（浏览器宽度变一点，web页面宽度也跟着变一点），主体结构布局不变。

http://m.lagou.com/
http://m.duba.com/

三、自适应布局（Adaptive Layout）？

这里写图片描述

1、布局特点：

　　自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。手机的屏幕比较小，宽度通常在600像素以下，pc的像素一般在1000像素以上，部分配置高的笔记本在2000像素以上的也有，同样的页面要显示在不同的设备上面，还要呈现出满意的效果，不是一件容易的事情。因此就有人想出了一个办法，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕的宽度，自动调节网页的内容大小，但是无论怎么样子，他们的主体的内容和布局是没有变化的。

2、设计方法：

　　通过媒体查询监测浏览器宽度的变化，相应的更改布局。自适应布局使用固定单位，类似固定布局。但是通过媒体查询有多种不同的适配方案。

示例：
https://codepen.io/nickpettit/full/dFgop

四、响应式布局（Responsive Layout）

这里写图片描述

1、布局特点：

　　每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。但主体的内容和布局没有变。
　　响应式的概念应该是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。
　　
2、设计方法：

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

(1)控制视口(viewport)允许网页的宽度自动的调整

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"">
视口宽度等于设备宽度，初始缩放比最大缩放比与最小缩放比均为1，禁止用户缩放。在这里可能有的朋友会见到设备像素比（dpr 即 deivcePixelRatio）也就是物理像素与设备独立像素的比值，常见的有retina屏等。

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips

这里写图片描述

(2)尽量少使用绝对的宽度，多点百分比
(3)相对大小的字体:字体不要使用px写死，最好使用相对大小的em，或者高清方案rem，这个不限制与字体，别的属性也可以这么设置
(4)浮动布局，float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
(5)CSS的媒体查询（media query）
(6)CSS的@media规则
(7)图片的自适应（fluid image）

HTML5 picture 标签，利用该标签可以在不同设备中显示不同的图片。如下代码：
<picture> <source media="(max-width: 36rem)" srcset="img/ad001-l-480w.png"/> <source srcset="img/ad001-l-1600w.png"/> ![](img/ad001-l.png) </picture>source 代表你要显示图片的源，media代表你需要什么条件下显示该图片，srcset 须填写图片路径。改代码片意思是当设备视口宽度大于36rem 时显示 ad001-l-480w.png 这张图片，若小于 36rem 则使用ad001-l-1600w.png 这张图片，要是浏览器不支持 picture 则使用 img 标签中的图片。

这里写图片描述

3、优点：

　　适应pc和移动端，如果足够耐心，效果完美

4、缺点：

　　（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
　　（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

5、总结：

　　响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。

　　流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)；响应式是用于解决不同设备之间不用分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)。

6、示例：

https://codepen.io/nickpettit/full/rLlaF

Which Layout? Static, Liquid, Adaptive, or Responsive
响应式布局和自适应布局的不同
 HTML&CSS：浅谈响应式布局&自适应布局
 静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
 这可能是史上最全的CSS自适应布局总结教程
 响应式布局的实现方法和原理
 响应式布局总结
 CSS布局之多列布局

五、弹性布局（rem/em布局）

Flex 布局教程：语法篇

1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

兼容各种屏幕分辨率
相对单位
媒体查询（media queries）：媒体查询是向不同设备提供不同样式的一种方式。media属性（控制样式应用方式）

<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css">

@media （only仅仅 用于向前兼容|not除了）screen and (max-width:600px)多种媒体类型逗号隔开，多种媒体特性and连接{
    style
}
@media screen and (min-width:600px) , print and (min-width:500px)
@media screen and (min-width:600px) and (max-width:900px){}