media type(媒体类型)是CSS 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。随着移动互联网的发展，media query开始得到大家的重视。
👋🏻 media type(媒体类型)
media type(媒体类型列)列表
让我们先了解一下media type，其实这个大家会比较熟悉一点，我们通常会用到的media type会是all 和screen，然后是print，一些网站会专门通过print类型为页面的打印格式提供更友好的界面。
其实，media type有很多种：
| 类型 | 解释 |
|---|---|
| all | 所有设备 |
| braille | 盲文 |
| embossed | 盲文打印 |
| handheld | 手持设备 |
| 文档打印或打印预览模式 | |
| projection | 项目演示，比如幻灯 |
| screen | 彩色电脑屏幕 |
| speech | 演讲 |
| tty | 固定字母间距的网格的媒体，比如电传打字机 |
| tv | 电视 |
media type的几种使用方法
我们可以通过几种方法来声明media type：
方法一
通过<link>标签声明媒体类型
<link href="style.css" media="screen print" ...方法二
使用@import语句导入CSS文件
@import url("style.css") screen;方法三
在<style>标签内使用@import
<style media="screen">@import url("style.css");
</style>方法四
使用@media规则直接在CSS中定义媒体查询
@media screen {selector{rules}
}当然，这几种方法各有利弊，而我们常用的是第一种和最后一种方法。
media type的浏览器支持
- IE5.5/6/7不支持在@import中使用媒体类型media type，这限制了其在这些旧版本浏览器中的应用
- Safari/firefox只支持all，screen，print三种类型(包括iphone)
- Opera 完全支持
- Opera mini 支持handheld，未指定则使用screen
- Windows Mobile系统中的IE支持handheld，其它支持不明…
👋🏻 media query(媒体查询)
正如前文所说，media query是CSS 3对media type的增强，事实上我们可以将media query看成是media type+css属性判断。
请注意，下面提到的一些关键字等内容，有些是在media type中就可用的，但是放到media query中将能更好的发挥其作用，所以我就在适当的地方引入。
css属性判断可以只是某个CSS属性的名称，也可以是属性+值：
<link rel="stylesheet" media="screen and (animation)” herf=“...”如果设备支持CSS动画，那么就能执行这个外部样式表文件。
@media screen and (max-width:240px) {body {font-size: medium;}
}如果设备的浏览器的最大宽度是240px，则页面将使用中号字体。
PS：属性和值之间是用冒号连接的，而不是等号，这与正常的CSS的写法一致。
媒体查询语句结构
我们可以将上述语句称为媒体查询语句，这样也更能理解一些。从上面的例子也可以看出，媒体查询语句一般由媒体类型media type + 一到多个CSS属性判断组成，而多个CSS属性判断可以用关键字and连接：
and 操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为
真时，这条查询的结果才为真。
@media screen and (min-width:1024px) and (max-width:1280px) {body{font-size:medium;}
}其中media type是可选的，可以省略，默认是全部（all）。
在Media Query中如果没有明确指定Media Type，那么其默认为all。
@media (color:4){...
}属性值也可以为空
@media (color){...
}当然，请注意，有属性值和没有属性值的情况代表的意义是不一样的，所以上面的这两条规则不是等价的。
如果你在未指定值的情况下创建媒体功能查询，则该样式将全部被应用，只要该查询的值不为零即可。例如，上面媒体查询不带值的属性color将适用于任何带有彩色屏幕的设备。
而针对多个媒体类型的CSS规则，可以用逗号来隔开：
@media handheld and (min-width:360px),screen and (min-width:480px){body{font-size:large;}
}@media screen and (min-width:800px),print and (min-width:7in){body{font-size:small;}
}media query(媒体查询)支持的属性
事实上，media query支持的属性和我们常用的CSS属性是不太一样的，它们是一些特别定义的条目：
| 属性 | 值 | 是否接受Min/Max前缀 | 描述 |
|---|---|---|---|
| color | 整数 | yes | 每种色彩的字节数 |
| color-index | 整数 | yes | 色彩表中的色彩数 |
| device-aspect-ratio | 整数/整数 | yes | 宽高比例 |
| device-height | length | yes | 设备屏幕的输出高度 |
| device-width | length | yes | 设备屏幕的输出宽度 |
| grid | 整数 | no | 是否是基于格栅的设备 |
| height | length | yes | 渲染界面的高度 |
| monochrome | 整数 | yes | 单色帧缓冲器中每像素字节 |
| resolution | 分辨率(“dpi/dpcm”) | yes | 分辨率 |
| scan | Progressive interlaced | no | tv媒体类型的扫描方式 |
| width | length | yes | 渲染界面的宽度 |
| orientation | Portrait/landscape | no | 横屏或竖屏 |
从这些属性中我们可以看出，media query就是为了更好的适配各种设备而生的。
参考：media query 语法格式中的设备特性
浏览器的扩展
webkit是最早实现media query支持的浏览器内核之一，同时它也根据自己的需要搞了一些特有的扩展属性，最常用的有：
- transform-2d 只用于支持使用 -webkit-transform实现2D变换的浏览器
- transform-3d 只用于支持使用 -webkit-transform实现3D变换的浏览器
- transition 只用于支持使用-webkit-transition实现变换效果的浏览器
- animation 只用于支持使用-webkit-animation实现动画的浏览器
max与min
细心的同学可能已经注意到前面用到的这两个关键词，他们是要配合支持它们的属性使用的，它们的意义与我们常用的max-width和minwidth等类似。
各属性对max和min的支持在前面的属性列表中有给出，这里是一个详细的列表：
| height | min-height | max-height |
| device-width | min-device-width | max-device-width |
| device-height | min-device-height | max-device-height |
| aspect-ratio | min-aspect-ratio | max-aspect-ratio |
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio |
| color | min-color | max-color |
| color-index | min-color-index | max-color-index |
| Monochrome | min-monochrome | max-monochrome |
| Resolution | min-resolution | max-resolution |
not/only
媒体类型还支持 not和only关键字，它们可以用来更方便的定位某个媒体设备：
not：排除某种指定的媒体类型
not 操作符用来对一条媒体查询的结果进行取反，换句话来说就是用于排除符合表达式的设备。
@media not print and (color){
}<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" />only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器
only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。
@media only screen and (color){
}其实，only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。
其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。
注意：若使用了 not 或 only 操作符，必须明确指定一个媒体类型。
media query的浏览器支持
- IE 9以下不支持
- Firefox 3.5+(Gecko 1.9.1+)支持
- Opera 9.5+完全支持
- Opera mini 5支持
- webkit 支持大部分属性(safari 3.0的内核版本是522，iPhone 1代的safari的内核版本是524，webkit大概从这个时候开始支持media query，但是对部分属性比如projection支持不好)
- iPhone OS 3.2之前的版本不支持orientation属性，iPad和iPhone 4支持该属性。
- iPhone Safari不支持orientation(iPhone 4支持)
现在我们可以梳理一下 media query 的使用流程：
👉🏻 准备工作1：设置Meta标签
首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：
<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，因为我们不希望用户放大缩小页面）
👉🏻 准备工作2：加载兼容文件JS
因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->👉🏻 准备工作3：设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)
现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:
为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：
<meta http-equiv="X-UA-Compatible" content="IE=edge">不过又有一个更给力的写法：
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码还是建议大家用上，不过不用也是可以的。
👉🏻 进入CSS3 Media
CSS3 media query的一般写法：
@media screen and (max-width: 960px){body{background: #000;}
}其中css2的媒体查询：
<link rel="stylesheet" type="text/css" media="screen" href="style.css">我们想知道移动设备是不是纵向放置的显示屏，可以这样写：
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">我们把第一段的代码也用CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">但是上面这个方法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。
下面的写法是实现尺寸等于480px：
@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){//自己添加的样式
}其中对于-webkit-min-device-pixel-ratio作如下解释：
-webkit-min-device-pixel-ratio为1.0：
- 所有非Retina的Mac
- 所有非Retina的iOS设备
- Acer Iconia A500
- Samsung Galaxy Tab 10.1
- Samsung Galaxy S
-webkit-min-device-pixel-ratio为1.3：
- Google Nexus 7
-webkit-min-device-pixel-ratio为1.5：
- Google Nexus S
- Samsung Galaxy S II
- HTC Desire
- HTC Desire HD
- HTC Incredible S
- HTC Velocity
- HTC Sensation
-webkit-min-device-pixel-ratio为2.0：
- iPhone 4
- iPhone 4S
- iPhone 5
- iPad (3rd generation)
- iPad 4
- 所有Retina displays 的MAC
- Google Galaxy Nexus
- Google Nexus 4
- Google Nexus 10
- Samsung Galaxy S III
- Samsung Galaxy Note II
- Sony Xperia S
- HTC One X
番外：移动设备显示尺寸大全
@media screen and ( min-width: 212px){/*213px显示屏样式 LG Optimus One*/}
@media screen and ( min-width: 319px){/*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */}
@media screen and ( min-width: 359px){/*360px显示屏样式 索尼Z1*/}
@media screen and ( min-width: 383px){/*384px显示屏样式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/}
@media screen and ( min-width: 399px){/*399px显示屏样式 三星galaxyNote*/}
@media screen and ( min-width: 414px){/*414px显示屏样式 苹果6plus*/}
@media screen and ( min-width: 423px){/*424px显示屏样式 LG 4X */}
@media screen and ( min-width: 479px){/*480px显示屏样式 索尼MT27i Xperia sola*/}
@media screen and ( min-width: 539px){/*640px显示屏样式 摩托罗拉Droid3/4/Razr Atrix 4g*/}
@media screen and ( min-width: 639px){/*640px显示屏样式*/}
@media screen and ( min-width: 640px){/*640px以上显示屏样式*/}👋🏻 实例：
现在让我们来看一些典型的例子：
检测iPhone safari
<link media="only screen and (max-device-width: 480px)" href="style.css">这是apple官方网站推荐的一种定位iPhone safari浏览器的方法，在iPhone一代和2代的时代，这条规则的确能够正确的判断出iPhone的浏览器，但是后来出现了Android的大屏幕手机，比如Nexus One和HTC desire，这条规则也能适配这些480px宽度的机器。
android手机的多分辨率问题
android系统的开放性导致其终端的多样性，那么对于各种各样的android手机来说，屏幕分辨率的差异导致针对android手机的页面重构复杂性增加，那么我们可以用media query为每种分辨率提供特定样式：
/* for 240 px width screen */
@media only screen and (max-device-width:240px){selector{}
}/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){selector{}
}/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){selector{}
}device-aspect-ratio
语法：device-aspect-ratio：<ratio>
取值：<ratio>：指定比率
说明： 定义输出设备的屏幕可见宽度与高度的比率。如常讲的显示器屏幕比率：4/3, 16/9, 16/10
版本支持：IE9以及以上的浏览器开始支持
device-aspect-ratio可以用来适配特定屏幕长宽比的设备，这也是一个很有用的属性，比如，我们的页面想要对长宽比为4:3的普通屏幕定义一种样式，然后对于16:9和16:10的宽屏，定义另一种样式，比如自适应宽度和固定宽度：
/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){selector{}
}/* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){selector{}
}示例：
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="utf-8" /><title>media features device-aspect-ratio_CSS参考手册_web前端开发参考手册系列</title><style>@media screen and (device-aspect-ratio: 16/10) {body {color: #f00;}}</style></head><body><div class="test">当你将输出设备屏幕分辨率为16:10时，本行文字显示为红色</div><script></script></body>
</html>
device-aspect-ratio特性接受min和max前缀，因此，可以派生出min-device-aspect-ratio和max-device-aspect-ratio两个媒体特性。
例如，判断屏幕横屏
@media screen and (min-aspect-ratio: 13/8) {...
}O’Reilly区分iPhone和iPad的方法
O’Reilly为其网站制作了针对iPad和iPhone设备的不同版本，从而提供最适合相关设备阅读的界面，他们的做法就是使用media query：
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">小结：媒体查询的基本语法
媒体查询通过在CSS中使用@media规则来实现，可以包含一种或多种媒体特性，如宽度（width）、高度（height）或方向（orientation）。一个基本的媒体查询可能如下所示：
@media (media-type and|not|only (media-feature)) { /* 在这里编写相应的样式 */ }其中，media-type表示媒体类型，如screen（屏幕）、print（打印）等；media-feature是媒体特性，如width（宽度）、height（高度）、orientation（方向）等。
媒体查询的逻辑操作符：
媒体查询支持逻辑操作符，如and、not、only，可以将多个媒体特性进行组合，以更精确地匹配目标设备。例如：
and：相当于“且”，表示多个条件同时满足。not：相当于“非”，用于排除某个媒体类型。only：用于指定某个特定的媒体类型，但通常可以省略。
示例代码：
1. 根据屏幕宽度调整样式：
@media screen and (max-width: 600px) {body {background-color: lightblue;}
}这条规则意味着当屏幕宽度小于或等于600像素时，背景颜色变为浅蓝色。
2. 根据屏幕方向调整样式：
@media screen and (orientation: landscape) {body {background-color: yellow;}
}这条规则表示当屏幕为横向时，背景颜色变为黄色。
3. 根据设备类型调整样式：
@media print {body {background-color: white;}
}这条规则表示在打印时，背景颜色变为白色。
参考资料
响应式之媒体查询技术_媒体查询-儒雅烤地瓜的CSDN博客
媒体查询支持ie浏览器各版本的写法_ie 媒体查询-CSDN博客
媒体查询(media)-CSDN博客 | 媒体查询(@media语法、案例)详解 - CSDN博客
媒体查询@media - 简书 | 响应式布局之媒体查询(media-queries) - 简书
JS 媒体查询的基本用法 _ 51CTO博客 | 媒体查询(media query) - 看云 | 媒体查询总结 - 博客园
