1.背景介绍
随着智能手机的迅速发展，大众群体使用手机访问互联网的频率已经超过了使用pc端的频率。面对这样的一个大趋势和潮流，许多传统的pc厂商和互联网企业都在争抢其中的红利，自然，传统的只能在pc端显示的网页，如何适应这个潮流，也成了人们开始关注和解决的问题。于是响应式布局的概念就被提出来了，响应式布局是Ethan Marcotte（伊森·马科特）在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
2.知识剖析
什么是响应式布局？
2.1 响应式布局
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
2.2 响应式布局的优点
第一点，在分辨率不同，设备环境进行一些不同的设计，对于小企业而言，所有开发维护和运营上，相对多个版本成本会降低很多。
第二点，兼容性好，跨平台，移动设备尺寸参差不齐，版本定制通常只适用于固定规格的设备，但不适用分辨率变化较大的设备，响应式布局能够较好的解决这个问题。
2.3 响应式布局的缺点
第一点，移动端和PC端页面加载的内容是一样的，代码多了，会出现隐藏无用的元素，加载时间加长导致文件增大，影响加载速度，流量消耗也相对比较大。
第二点，局限性，对于响应式，局限性较大，不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，而响应式最忌讳较多内容，代码过多会影响运行速度。
第三点，一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
3.常见问题
1.问题: 如何实现响应式布局？
2.响应式和自适应的区别？
3.响应式是如何实现的？
4.解决方案
1.具体而言，就是合理使用媒体查询的功能，这也是实现响应式布局的主要手段。网页的基本单位不能是固定单位，使用百分比、em、rem、vw、vh等(弹性布局和流体布局）。
2.自适应的目的是在不同分辨率的不同设备上面显示相同的页面。手机的屏幕比较小，宽度通常在600像素以下，pc的像素一般在1000像素以上，部分配置高的笔记本在2000像素以上的也有，同样的页面要显示在不同的设备上面，还要呈现出满意的效果，不是一件容易的事情。因此就有人想出了一个办法，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕的宽度，自动调节网页的内容大小，但是无论怎么样子，他们的主体的内容和布局是没有变化的。
响应式的概念应该是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。
响应式布局的一些技术点纪录：
(1)允许网页的宽度自动的调整
(2)尽量少使用绝对的宽度，多点百分比
(3)相对大小的字体:字体不要使用px写死，最好使用相对大小的em，或者高清方案rem，这个不限制与字体，别的属性也可以这么设置
(4)流式布局，float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
3.原生代码实现。
在国内目前设计网页的时候，一般会分成PC端和移动端两套页面，但在一定的情况下，必须满足只设计一个页面的情况下，满足不同端口都能正常使用，
因此会用用到自适应的方法。
用原生代码实现的根本在于媒体查询@media的设置。
@media screen 可以查询当前浏览器的尺寸，因此可采用该方法对同一个页面设置不同的CSS样式，来满足不同分辨率要求。
5.编码实战
demo
6.扩展思考
自适应网页好做还是响应式网页好做？
7.参考文献
参考一：百度百科
参考二：响应式布局的三大要点
8.更多讨论
除了使用媒体查询，还有什么方法可以实现让网页随屏幕变化的功能？
网友评论