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有很多种：

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属性是不太一样的，它们是一些特别定义的条目：

从这些属性中我们可以看出，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的支持在前面的属性列表中有给出，这里是一个详细的列表：

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：

1. 所有非Retina的Mac
2. 所有非Retina的iOS设备
3. Acer Iconia A500
4. Samsung Galaxy Tab 10.1
5. Samsung Galaxy S

-webkit-min-device-pixel-ratio为1.3：

1. Google Nexus 7

-webkit-min-device-pixel-ratio为1.5：

1. Google Nexus S
2. Samsung Galaxy S II
3. HTC Desire
4. HTC Desire HD
5. HTC Incredible S
6. HTC Velocity
7. HTC Sensation

-webkit-min-device-pixel-ratio为2.0：

1. iPhone 4
2. iPhone 4S
3. iPhone 5
4. iPad (3rd generation)
5. iPad 4
6. 所有Retina displays 的MAC
7. Google Galaxy Nexus
8. Google Nexus 4
9. Google Nexus 10
10. Samsung Galaxy S III
11. Samsung Galaxy Note II
12. Sony Xperia S
13. 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;
  }
}

这条规则表示在打印时，背景颜色变为白色。

参考资料

媒体查询支持ie浏览器各版本的写法_ie 媒体查询-CSDN博客

媒体查询(media)-CSDN博客 | 媒体查询(@media语法、案例)详解 - CSDN博客

媒体查询@media - 简书 | 响应式布局之媒体查询(media-queries) - 简书

JS 媒体查询的基本用法 _ 51CTO博客 | 媒体查询(media query) - 看云 | 媒体查询总结 - 博客园