响应式布局

　　　　关于响应式布局，个人理解是：html5/css3响应式布局是利用css3的media媒体查询功能。移动端通常都是对css3支持比较好的高级浏览器不须要考虑响应式布局的媒体查询media兼容问题。

　　　　一个普通的自适应显示的三栏网页，当你用不一样的终端来查看这个页面的时候，他会根据几种终端来显示不一样的样式，在电脑上是三列，在pad上应该也是 三列，在大屏手机上是三行，在屏幕小于320的手机上只显示主要内容，隐藏掉了次要元素。（这里关于响应式布局还有个比较好的消息，就是拖动浏览器也能够 触发判断条件，测试的时候你不须要去找一堆手机，只要把本身的浏览器窗口缩小到必定尺寸就能够了。）

　　　　1.经过不一样的媒介类型和条件定义样式表规则。媒介查询让CSS能够更精确做用于不一样的媒介类型和同一媒介的不一样条件。媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。如：width会有min-width和max-width媒介查询能够被用在CSS中的@media上，也能够被用在HTML中。经过这个标签属性，咱们能够很方便的在不一样的设备下实现丰富的界面，特别是移动设备，将会运用更加的普遍。

　　　　2.经过使用百分比也能够实现响应式布局，这是一种比较简单的方法，通常只须要使用百分号作出其相应的比度就能够实现响应式的一种方法。

　　　　3.经过使用弹性盒子也能够作出响应式布局，在CSS3中的弹性盒子能够很轻松的建立出一些自适应浏览器流动窗口的布局或者是自适应字体大小的布局。当容器的尺寸因为屏幕大小或者窗口尺寸发生变化时，里面的一些条目或者标签也会被动态地调整。弹性盒子布局并无内向的方向限制，能够彻底由本身调试大小。

　　　　经过用户研究，了解用户使用的设备分布状况，肯定须要兼容的设备类型、屏幕尺寸。

　　　　设备类型：包括移动设备、手机、平板、和pc端。

　　　　屏幕尺寸：包括各类手机屏幕的尺寸（包括横向和竖向）、各类平板的尺寸（包括横向和竖向）、普通电脑屏幕和宽屏。

　　须要考虑的问题：

• 某个页面进行响应式设计时其适用的尺寸范围是哪些？好比，1688搜索结果页面，跨度能够从手机到宽屏，而1688首页，因为结构过于复杂，想直接迁移到手机上，不太现实，不如直接设计一个手机版的首页。
• 结合用户需求和实现成本，对适用的尺寸进行取舍。好比一些功能操做的页面，用户通常没有在移动端进行操做的需求，没有必要进行响应式设计。

　　　　针对肯定下来的几个尺寸分别制做不一样的线框原型，须要考虑清楚不一样尺寸下，页面的布局如何变化，内容尺寸如何缩放，功能、内容的删减，甚至针对特殊的环境做特殊化的设计等。

　　　　以上就是我本人对响应式布局的一些理解。