1，响应式布局：当浏览器宽度改变时，网页根据宽度变化自动变化成适合人看的布局。比如，当浏览器宽度为1920px时，一排显示6张图片，但是当浏览器宽度为640px时，一排显示3张图片。
2，响应式布局的一些技术点纪录：
(1)允许网页的宽度自动的调整
在网页代码的头部，加入一行viewport元标签。
1 <meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
(2)尽量少使用绝对的宽度，多点百分比
(3)相对大小的字体:字体不要使用px写死，最好使用相对大小的em，或者高清方案rem，这个不限制与字体，别的属性也可以这么设置
(4)流式布局，float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
(5)选择加载css，<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />，这个意思是如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。媒体查询media
(6)利用display:none;和display:line-block切换元素在网页中是否可见。
3，关于viewport:
平时设计的网页宽度px都是css像素，而不是物理像素。在debug可以通过更改dpr:1/2/3来仿真css中1px等于多少物理像素。
通过浏览：viewportsizes.com 网址可以查询各种设备的理想宽度（即做网页时需要的宽度）。
4，弹性布局；
百分比布局使得网页宽度能够随着查看它们的屏幕窗口大小变化，因而得名弹性布局