1.Media Query的使用方法 首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： ~~~ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> ~~~ 参数解释： width = device-width：宽度等于当前设备的宽度 initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0） maximum-scale：允许用户缩放到的最大比例（默认设置为1.0） user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面） 使用： @media 设备类型 and （设备特性）{样式代码} 2.Ｍedia Query的设备类型（10种） all：所有设备 screen：电脑显示器 print：打印用纸或打印预览视图 handled：便携设备 tv：电视机类型的设备 … 3.CSS中的Media Query的设备特性（13种） 设备宽高：device-width,device-height 渲染窗口的宽和高：width,height 设备的手持方向：orientation 设备的分辨率：resolution … 4.使用方法：（ 外联和内嵌样式） ~~~ //外联 @import url(style.css) screen and (min-width:1000px); <link rel="stylesheet" href="style.css" media="only screen and (max-width:640px)"> //内嵌样式： <style> @media screen and (min-width:640px) { body{ background:coral; } } </style> ~~~ 注意:only关键字的作用是，让那些不支持Media Query但是能够读取Media Type的设备的浏览器将表达式中的样式隐藏起来。 > @media only screen and (color){样式代码} 对于支持Media Query的设备来说，正确应用该样式；对于不支持Media Query但能够读取Media Type的设备，由于先读取到的是only 而不是screen，将忽略该样式。