响应式布局
一、响应式布局
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文件中不同的代码块
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
