一、响应式布局：
在小型网站建设中，有运用一套代码代码来适应不同终端分辨率的需求，优点：节约制作时间、节约制作成本、便于维护等优点。
CSS3利用媒体查询（media queries）即可针对不同的媒体类型定义不同的样式，从而实现响应式布局 。也可以针对不同的分辨率设置不同的样式。
1024分辨率以上：PC端
1024 ~ 768 : pad pro
768 ~ 450 : pad mini , mobile 横屏
450分辨率以下： mobile 竖屏
二、media的值以及用法：
1、media值：
all：用于所有设备
print： 用于打印机和打印预览
screen：用于电脑屏幕，平板电脑，智能手机等。
speech：应用于屏幕阅读器等发声设备
2、用法：
A：在style样式表中：
@media media值 and （分辨率宽度+宽度值）
css样式
表示在浏览器页面指定宽度内，css的样式
@media media值 and （分辨率宽度+宽度值） and （分辨率宽度+宽度值）
css样式
表示在浏览器页面指定宽度和另一指定宽度内，css的样式
B：在外部引入css链接内：
<link rel="stylesheet" href="xxx.css" media="media值 and （分辨率宽度+宽度值）">
<link rel="stylesheet" href="xxx.css" media="media值 and （分辨率宽度+宽度值） and （分辨率宽度+宽度值）">
注：将需要改变的写入media下的css中，正常样式表中写不需要改变的css样式，这样便于后期维护和减少代码工作量
三：media使用方法如下：
1、style样式表中书写方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 /* box 盒子大小，默认情况下页面为红色 */ 6 #box{ width:100px; height:100px; background:red;} 7 /* 当浏览器页面最小大于500px时且页面小于1000px时，页面为蓝色 */ 8 @media all and (min-500px) and (max-1000px){ 9 #box{ background:blue;} 10 /* 当浏览器页面最大小于500px时，页面为黄色 */ 11 @media all and (max-500px){ 12 #box{ background:yellow;} 13 </style> 14 </head> 15 16 <body> 17 <p>这是一段测试文字</p> 18 <div id="box"></div> 19 </body> 20 </html>
2、外部引入css书写方法：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 /* 当浏览器页面最小大于500px时且页面小于1000px时，页面为蓝色 */ 5 <link rel="stylesheet" href="xxx1.css" media="all and (min-500px) and (max-1000px)"> 6 /* 当浏览器页面最大小于500px时，页面为黄色 */ 7 <link rel="stylesheet" href="xxx2.css" media="all and (max-width-500px)"> 8 <style> 9 #box{ width:100px; height:100px; background:red;} 10 </style> 11 </head> 12 13 <body> 14 <p>这是一段测试文字</p> 15 <div id="box"></div> 16 </body> 17 </html>
注：link引入的css为正常书写的css文件，只不过是样式需要变化的css的值
四、适配规则：
1、先适配手机 -- 过渡到pad -- 过渡到pc （不推荐）
2、先适配pc -- 过渡到pad -- 过渡到手机 （推荐）
3、移动端特殊适配：
A：@media media值 and （orientation：portion） 针对竖屏
B：@media media值 and （orientation：landscape）针对横屏