CSS | 响应式布局之媒体查询(media-query)详解

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	手持设备
print	文档打印或打印预览模式
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) - 看云 | 媒体查询总结 - 博客园