响应式布局是为了解决移动端尺寸不同的问题。
优点
面对不同分辨率设备灵活性更强
能够快捷解决多设备显示适应问题
缺点
兼容各种设备工作量大，效率低下。
代码累赘，会出现隐藏无用的元素，加载时间过长。
是一种折中性质的解决方案，多方面因素影响而达不到最佳效果。
响应式布局的写法
@media mediatypeand( media feature ){CSS-Code;}
Mediatype（媒体类型）参数
一般取：
screen计算机屏幕（默认）
print打印预览模式/打印页面
all适用于所有设备
media feature媒体取值范围
max-width：定义输出设备中的页面最大可见区域宽度
min-width：定义输出设备中的页面最小可见区域宽度
媒体查询
@media 媒体类型 and|not|only (媒体功能){css-code}是css3才支持的用法。
css2支持的用法是在<head>标签中使用link引入：<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">。
css3用法更受欢迎，是因为css2的用法会增加页面http的请求次数，增加了页面负担。
