CSS 媒体查询

感谢原文作者：fly63前端网
原文链接：http://www.fly63.com/article/detial/3122

目录

• 概述
• 语法
• 媒体类型（mediaType ）
• 媒体功能（media feature）
• 引入方式
• 1. CSS2 Media方式
• 2. CSS3 Media方式
• 开始编写响应式页面前的准备工作
• 1：设置Meta标签
• 2：加载兼容文件JS
• 3：设置IE渲染方式默认为最高(可选)
• 代码示例
• 在使用过程中遇到的问题

概述

@media 媒体查询选择性加载css，意思是自动探测屏幕宽度，然后加载相应的CSS文件。可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。

语法

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

媒体类型（mediaType ）

详情查看：https://www.runoob.com/cssref/css3-pr-mediaquery.html

类型有很多，在这里不一一列出来了，只列出了常用的几个。

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。（最常用）
speech	应用于屏幕阅读器等发声设备

媒体功能（media feature）

详情查看：https://www.runoob.com/cssref/css3-pr-mediaquery.html

媒体功能也有很多，以下列出常用的几个。

值	描述
max-width	定义输出设备中的页面最大可见区域宽度
min-width	定义输出设备中的页面最小可见区域宽度

引入方式

1. CSS2 Media方式

其实并不是只有CSS3才支持Media的用法，早在CSS2开始就已经支持Media，具体用法，就是在HTML页面的head标签中插入如下的一段代码：

<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">

页面宽度小于960的执行指定的样式文件：

<link rel="stylesheet" type="text/css" media="screen and (max-960px)" href="style.css">

既然CSS2可以实现CSS的这个效果为什么不用这个方法呢，很多人应该会问，但是上面这个方法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。

2. CSS3 Media方式

可以写入一个css文件，无需多次加载，当然可以混合使用。

@media screen and (max-device-width:960px){
	body{
		background:red;
	}
}

开始编写响应式页面前的准备工作

1：设置Meta标签

首先我们在使用 @media 的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

width = device-width：宽度等于当前设备的宽度
initial-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，chrome=1">

这段代码后面加了一个chrome=1，如果用户的电脑里安装了 chrome，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，如果没有安装，就显示IE最新的渲染模式。

代码示例

1、如果文档宽度小于等于 300px 则应用花括号内的样式——修改body的背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

从上面的代码可以看出，媒体类型是屏幕（screen），使用 一个 and 连接后面的媒体功能，这里写的是 max-300px ，也就是说，当屏幕的最大宽度 小于等于 300px 的时候，就应用花括号里面的样式。
2、当文档宽度大于等于300px 的时候显示的样式

@media screen and (min-width: 300px){
    body {
        background-color:lightblue;
    }
}

注意，这里的媒体功能使用的是 min-width 而不是 max-width，我已经标红高亮显示出来了。

3、当文档宽度大于等于 300px 并且小于等于500px （ width >=300 && width <=500）的时候显示的样式

@media screen and (min-width:300px) and (max-width:500px) {
    /* CSS 代码 */
}

注意，这里使用了两个 and ，用来连接 两个媒体功能，一个用于限制最小，一个用于限制最大。

在使用过程中遇到的问题

@media screen and (max-width: 520px){
    body{background-color: #000000;}
}

注意：在逻辑连接符两边需要空格！！！

更多参考
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
https://www.runoob.com/cssref/css3-pr-mediaquery.html