响应式布局的目的：为移动设备提供更好的体验，用技术使网页适应从小到大不同分辨率的屏幕
有一句话对响应式布局的形容非常贴切：content like water。
1.viewpoint
viewpoint：屏幕上用于显示网页的一块区域（可能比浏览器的视区要宽，也可能要窄）
viewpoint理论
移动设备上的viewpoint可分为：1）layout viewpoint （如显示器的宽度，大于浏览器的可是宽度）
2）visual viewpoint （浏览器的可视宽度，和浏览器的大小相同）
3）ideal viewpoint (移动设备的理想宽度，随移动设备的大小不同而不同)
利用<meta>元数据标签对viewpoint进行控制
<meta name="viewpoint" conten="width=device-width", initial-scale="1.0">conten="width=device-width" 表示viewponit的宽度采用设备宽度（即ideal viewpoint的宽度)
initial-scale="1.0" 表示缩放比例为1.0，也就是viewpoint的一倍，也就是和ideal viewpoint是一样的。
2.css媒体查询
媒体查询有两种方式
1）<link>元素中的css媒体查询
<link rel="stylesheet" media="max-width:800px">2)样式表中的css媒体查询
@media screen and(min-width:600px){
...
...
...
}事实上，媒体查询就是做出一些限制条件，满足哪些限制条件，就采用哪一个样式，由于移动设备的屏幕的大小各不相同，所以媒体查询的使用就会很广泛，因为不同的设备的布局方式等等都是不一样的。
3.如何下手响应式
1）设置viewpoint
2）用媒体查询设置断点（min-width, max-width, max-height, min-height, landscape, portrait）
·先规划好断点，如（手机，平板，PC）
·遇到具体情况在增加具体断点
·几个关键点，手机横屏，平板竖屏，PC宽屏和窄屏
注意：要知道设置min-width和的区别：min-width是移动端有限的设置方式，屏幕从小到大向上面兼容，max-width相反
4.响应式布局
1）流体 设置较少的断点（利用媒体查询）所有内容使用flex:1;
2）固定+流体 设置较多的断点，部分内容使用flex:1;
3）表现形式改变 就是屏幕不断变化时，display:hidden与display:block以及宽高等等的变化
5.响应式图片
<img src="img/small.png"
srcset="img/large.png 960w, img/medium.png 640w, img/small.png 320w"
sizes="(max-width:414px) 100vw, 640px"
alt="响应式图片">sizes="(max-width:414px) 100vw, 640px" 表示我们对图片的需求，当小于414px时，就去原值，大于414px时，取640px，其中的100vw表示屏幕的100%显示，就是全屏显示。
srcset="img/large.png 960w, img/medium.png 640w, img/small.png 320w" 表示可供我们选择的图片规格，其中w是宽度描述符，在这里就是px的意思。图片选取原则：完全吻合原尺寸>大于原尺寸>小于原尺寸的最接近的尺寸
补充：上面w是宽度描述符，常用的还有x（设备像素比描述符）
如：
srcset="img/large.png 2x"设备像素比(devicepixelradio)：dpr=物理像素/独立像素（CSS像素） 值为1时为标准屏，值为2时为2倍屏
更多关于移动设备的信息（像素密度，设备像素比，retina屏）参考我的下一篇文章retina显示屏
本博客由博主原创，如需转载需说明出处！谢谢支持！