web前端开发之几种布局方式之响应式布局

流式布局、响应式布局
响应式的原理/bootstrap的响应式原理

一、理解几种布局的概念

1、静态布局（Static Layout）

即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；
对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。

2、弹性布局

弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂而易错hacks方法（如使用float进行类似流式布局）。
其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下：
flex-flow: ||
flex-direction: row（初始值） | row-reverse | column | column-reverse
flex-wrap: nowrap（初始值） | wrap | wrap-re
待补充

3、自适应布局（Adaptive Layout）

自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。
你可以把自适应布局看作是静态布局的一个系列。
就是说你看到的页面，里面元素的位置会变化而大小不会变化；

4、流式布局（Liquid Layout）

流式布局（Liquid）的特点（也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

5、响应式布局（Responsive Layout）

什么是响应式布局

我的理解就是，为了让用户享受更好的体验效果，给用户展现最有价值的信息，让同一个页面在不同终端上有不一样的展现效果。比如你正在阅读的这篇博客，当你缩小（放大）浏览器窗口时（先滚动顶部，因为顶部做了比较多的修改，效果比较明显），你会看到这些神奇的效果。

做手机网站必加的一句头部(head)代码

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

name=”viewport” 名称=视图

width=device-width 页面宽度=设备宽度(可以理解为获取你手机的屏幕宽度)

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

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

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

每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

二、 响应式布局步骤

1.布局及设置meta标签

2.通过媒体查询来设置样式media query

3.设置多种视图宽度

4.字体设置

5响应式设计需要注意的问题

5.1宽度不固定，可以使用百分比

5.2图片处理

5.3优缺点

优点：

1.面对不同分辨率设备灵活性强

2.能够快捷解决多设备显示适应问题

缺点：

1.兼容各种设备工作量大，效率低下

2.代码累赘，会出现隐藏无用的元素，加载时间加长

3.其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果

4.一定程度上改变了网站原有的布局结构，会出现用户混淆的情况