一、响应式布局

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文件中不同的代码块

链接: https://fly63.com/article/detial/5397