开发响应式页面有一段时间了，对相关的技术有了一定的掌握和理解！为加深记忆和理解，在这里记录现在对响应式布局的理解和心得，以作后期对比学习！
响应式布局最直白的理解就是你写的页面的布局能够在各种类型的终端上完整匹配。比如你在pc端的写的页面，如果没有做过响应式处理，那么页面放到手机端或者ipad上，在手机端页面会被缩小，而在ipad上你的页面会出现滚动条，需要通过拉动滚动条来查看被遮蔽的部分，这样的体验对用户来说是很不理想的。如果的页面做过了响应处理，那么页面不会缩小、内容就想在pc端一样清晰，能直观地把内容展现到用户面前。
这是一个学习响应式布局的前提概念，只有理解这个概念，学习响应式布局就能驾轻就熟了！那这个概念是干什么的呢？简单来说，它用来告诉你的终端，页面的布局怎么定义，比如它告诉手机，页面的布局宽度就是手机的宽度。这里需要理解layout port概念，打个比方，你在纸上画一张图，那么这张纸对你来说就是一个layout port，它定义了你能在多大的宽度和长度上画图。超过了这个值你的图就会被截断，当然了在浏览器那里就会出现滚动条了！在你的pc页面没有设置这个的时候，页面放到手机端默认会有一个缩小的“layout port”来显示你的页面。但是现在你设计响应式页面的时候，你把这个值设计为设备的宽度了（当然也可以设置为其他值，如固定宽度等。），代码如下：
上面这句话的大概意思是设置你的页面“布局画板”，让“画板”的宽度刚好等于设备的宽度，不用出现水平条来将就显示了，同时设置页面最初的缩放比例为1，它告诉终端页面不需要缩小或放大来显示，本来多大就多大呈现出来。此外，还关闭了用户通过手指放大页面的功能。当然了还有其他一些概念需要自己拓展学习，不过上面这句话能搞定大多数页面的响应式布局的需求了！
怎么理解这个标题呢！你现在把下面的代码直接放在你的html，不要加任何的样式处理，然后通过改变浏览器的宽度，看页面的变化！
没错你会发现，这些内容会随着浏览器宽度的缩小，而自动地通过换行来匹配新宽度！这证明浏览器本身就是可以响应式的！那为什么我们以前的页面不会这样反而会出现滚动条呢？放在手机上页面会被缩小呢？那是因为你的div宽度被写死了，比如你可能写了width：1200px，从而关闭了div自动适应的功能了，而在手机上会缩小显示，那是因为手机为了能显示那些以前在pc端上设计的网页，通过分辨率而定义了一个虚拟布局窗口“viewport”来显示你的网页。这个窗口通常会比我的手机设备的尺寸的长度要大，这样用户就能通过滑动页面来产看被遮蔽的部分。可以了解有关手机分辨率和pc浏览器分辨率的关系就能理解这层概念！
首先说明一下这两个概念是不同的！记得我最开始学习响应式布局的，一直把自适应当作是响应式，然后通过在css中通过写很多的media query，最后页面完成了。我暗自庆幸以为这就是所谓的响应式布局，以为自己工作完成了，可是大家一起测试页面的时候，发现每个人的手机显示的页面却并不一样，有的是布局是好的，而有的布局是乱的，最后怨声载道。究其原因，就是自适应布局只是解决特定尺寸下面的终端的布局问题，并非能响应全部终端。比如下面的的代码：
上面的代码只能让div在页面最大宽度为960px时宽度为600px居中显示或者页面最小宽度为1200px时候宽度为1200px居中显示，如果页面的宽度高于960px而小于1200px时，怎么显示就无法控制了！所以如果你的页面是通过通过写了很多media query来实现响应的，那么你的页面就不属于正宗的“响应式布局”，那么你就得优化了你的css了！
这里讲述一下我目前做响应式页面时常用的一些布局方法！
1、百分比布局。据说最开始在浏览器中写页面时，这种布局方法大行其道，因为那时候的页面清一色的是表格布局，所以使用百分比布局还是很靠谱的！但后来用户需求的改变，使得固定布局新兴起来，到目前为止，固定布局仍占有很大的比重。在响应式页面布局中，百分比布局用于控制盒子的长宽在某个百分比数值内，从而让它不会超过我们的手机设备的宽度或高度。比如你设置一个div的宽度为50%，那么这个div的宽度永远为设备宽度的一半，即便浏览器尺寸改变时，它代表的值也会动态更新。百分比布局尤其对那种多列的网格式内容尤其有用，精确控制每列的宽度所占的比重为整个外围盒子的宽度的百分之多少！示例看下图：（点击可查看全图）
2、固定布局。这种布局尤其对那种某个部分宽度是固定的，而它的左边或者右边内容的宽度和长度却是变化的的布局。比如你在你的页面左边有个固定的导航块，宽度是固定的，而希望右边的内容分摊剩余的宽度，那么这个时候你就可以使用固定布局了。这种需求在实际的开发中是很多的，我就经常遇到在一个div的右边加一个按钮，左边却是动态的。固定布局可以实现精确、细致的布局。示例如下图：（点击可查看全图）
3、浮动布局。想必这种布局大家是再熟悉不过了，因为大家在用ul 、li写导航的时候，让列表横着就使用了float:left的样式了。 这种布局会让盒子向一个方向流动，这中方式可以做到完全屏蔽其中盒子间所有的间隙、空白。你可以使用使用display:inline-block来实现float：left同样的效果，你会发现display:inline-block中的盒子间会有一些空白，怎么处理都会存在，但是浮动布局却可以把这些东西屏蔽掉，这主要归功于浮动布局本身是不占据页面的内容的。因此，后期你还要采用一些方法来清除float，具体怎么清除浮动，可以采用在盒子尾部加一个清除float的空节点，或者使用伪类:after,这种方式的原理跟加一个空白节点是一样的，还有一种方式就是给父节点加一个overflow:hidden,不过这种方式不好的地方就是它会截断内容。示例如下图：（点击可查看全图）
4、弹性布局。怎么说呢！这是一种很强大的布局，你可以理解为一种新兴的“盒子模型”，它把一个盒子作为容器，然后它子元素的每一块作为一个项目，这些项目最终平分容器的面积。这种布局我虽用的很少，不过它功能却很强大。同时这种布局模式的兼容性问题还是有待考究的！
5、组合布局。任何单独前面的一种布局都不可能完全解决我们现实的页面需求的，所有有时候，我们在写页面的时候还是要综合一下这些布局，随机应变，从而制作更复杂的页面。
总的来说，响应式开发所有布局的思想无非还是百分比布局的思想而已，各种布局变个思维而已。
我们在pc端开发网页的时候，所用的单位大多是px，但是在响应式开发过程中，这种单位得换成em和rem。简单来说，这两个度量单位是一种用“字”的大小来衡量尺寸的单位！比如设置div的width:5em,它的意思就是div的宽度就是5个字的宽度。em相对于父级元素，rem相对于根级元素：也即子元素的设置的em尺寸是相对于父级的字体大小或者当前元素设置的字体大小来说的，而rem是相对于你的根级元素即html来说的。比如你给以div设置了font-size:14px,同时给他的后代设置了width:5em，那么这个后代的宽度就是70px。你把下面的代码放到你的代码中然后在浏览器查看便知。示例代码如下:
此外还有一些css单位，可能平时见得少。但是在移动开发过程中，重要性却很大。比如vh、vw什么的，这些单位其实就是一些百分比单位，比如vh：它的用法是把你的屏幕高度分成100份，其中一份就是1vh,比如的设备的高度为100px，那么1vh就是1px。vw指的是宽度，定义类似vh！还有一些其它单位，可以搜索相关资料查询学习！
现在大多数现代浏览器对css3的支持还是比较好的，所以在开发过程中，有些效果尽量用css3写，比如圆角、阴影什么的，这些css3都能写出很漂亮的效果。尽量减少图片的的使用，因为在移动端，流量是一个很大问题。加载一张图片需要相对多的时间！把一些一些小图标什么合成一张雪碧图，这样可以减少对服务器的请求！
我们平时用的css中的1px就等于设备的一个物理像素。直接上图吧 ：(点击可查看大图)
上面的图可能在阐述上不是很严谨，但对区分和理解pc端和移动端的分辨率的概念以及px的大小可以说明相关问题！