今天小编跟大家讲解下有关响应式布局 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关响应式布局 的相关资料，希望小伙伴们看了有所帮助。
一、响应式布局Responsive web page响应式布局/自适应网页
可以根据浏览器设备不同（pc，pad，phone）而自动的更改布局，图片，文字效果，不会影响用户体验
二、响应式布局必须做到1、布局：不能使用固定宽度，必须是流式布局（浮动）
2、文字和图片大小随着容器大小改变
3、媒体查询技术
三、如何测试响应式网页1、使用真实设备测试
2、使用第三方模拟器
3、使用chrome等自带的模拟器
四、编写响应式布局<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">1、使用meta设置视口
viewport 视口
width=device-width，视口宽度设置为设备宽度initial-scale=1.0 ，视口宽度是否能缩放 1/1.0不缩放initial-scale=1.0 允许缩放的倍率user-scalable=0 是否允许用户手动缩放 yes/no/1/0一般设置<meta name="viewport"content="width=device-width, initial-scale=1.0">
2、所有内容文字图片使用相对尺寸，不要使用绝对数字
3、流失布局+弹性布局，搭配媒体查询技术
4、使用css3 Media Query技术--响应式布局的必备条件
Media：媒体，指的是浏览网页的设备：screen（pc/pad/phone）、tv（电视）、print（打印机）。。。
Media Query：媒体查询，可以更具当前浏览器设备不同，或者尺寸/方向/解析度等不同。有选择性的执行一部分css样式，忽略其他部分的css样式
根据媒体查询结果执行同一个css文件中不同的代码块
来源：爱蒂网
