1.背景介绍
现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备，但是网站开发人员却面临一个挑战：如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果，如何在各种大小的屏幕上提供一流的用户体验,答案是：采用响应式设计。响应式设计可以随着所显示的屏幕大小而改变。实现响应式设计的核心就是媒体查询。使用@media媒体查询，可以针对不同的媒体类型定义不同的样式。
2.知识剖析
设置meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
width = device-width：宽度等于当前设备的宽度
initial-scale:初始的缩放比例(默认设置为1.0)
minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
user-scalable:用户是否可以手动缩放(默认设置为no，因为我们不希望用户放大缩小页面)
media查询引入方式
1.link元素中的CSS媒体查询<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
2.css样式表中媒体查询
@meadia all and (max-width: ) { }
第一种方法是css2媒体查询用法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。
css样式表中媒体查询
@media all and (min-width:1000px)
@media:一个声明
媒体类型：all 用于所有配置
screen 用于电脑、平板电脑、智能手机等
print 用于打印机和打印预览
speech 用于屏幕阅读等发声设备
逻辑判断（操作）符：
and 并且；
or 或
媒体属性（有很多种）
max-width 设备中的页面最大可见区域宽度
min-width 设备中的页面最小可见区域宽度
orientation:检测设备目前处于横向还是纵向状态
3.常见问题
媒体类型有哪些?
4.解决方案
有以下四种：
all 用于所有配置
screen 用于电脑、平板电脑、智能手机等
print 用于打印机和打印预览
speech 用于屏幕阅读等发声设备
5.编码实战
6.拓展思考
媒体查询的方法：
根据内容确定断点，设备分辨率是不断变化的，因此我们的工作是在任何屏幕上创建外观、功能等，而不是简简单单的几个断点。
7.参考文献
IBM：https://www.ibm.com/developerworks/cn/web/wa-cssqueries/
8.更多讨论
媒体查询还可以有哪些应用？
媒体属性共有哪些？
width:浏览器可视宽度
height:浏览器可视高度
device-width:设备屏幕的宽度
device-height:设备屏幕的高度
orientation:检测设备目前处于横向还是纵向状态
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例
color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
color-index:检查设备颜色索引表中的颜色，他的值不能是负数
monochrome:检测单色楨缓冲区域中的每个像素的位数。
resolution:检测屏幕或打印机的分辨率
grid：检测输出的设备是网格的还是位图设备。
screen是什么，有哪些媒体类型
媒体类型：
all 用于所有配置
screen 用于电脑、平板电脑、智能手机等
print 用于打印机和打印预览
speech 用于屏幕阅读等发声设备
如何检测设备横屏还是竖屏
使用：orientation（检测设备目前处于横向还是纵向状态）
鸣谢
感谢大家观看