CSS3入门教程文字排版media媒体查询

@media 媒体查询

这个属性通常是用在不同屏幕下可以设置不同的样式，它多用在响应式页面中。

1. 官方定义

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

2. xx解释

@media 通常被人们称为媒体查询，其实就是响应式，它通过设定后面的参数来实现在不同的浏览器可视尺寸下的展示效果。

它不仅仅可以用来设置 CSS 样式，也可以设置 HTML页面中 link 的引用。

3. 语法

在开始使用 @media 标签前，首先需要在 .html 文件中设置：

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

这段代码主要是用来兼容移动设备的展示效果。

我们简单的对这几个参数进行一下解释：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover，user-scalable=no" name="viewport" />

意思是缩放比例为 1，最大缩放比例为 1 不可以手动缩放。里面的 viewport-fit 是指浏览器视图填充方式是否全屏。

@media 标签

下面我们就来看一下@media 标签的使用方法，先看一下语法：

@media mediatype and|not|only (media feature) {
    CSS Code...
}

说明： @media 不同于其它的 CSS3 属性，它是一个标签，后面跟了一个名称，和一个大括号，这和我们 JavaScript 函数很像，大家也可以这么理解。

mediatype 用来描述当前浏览器所在设备的类型，比如是计算机显示器、手机、电视等等。

mediatype 有一个表：

说明：我们常用的媒体类型通常设置为 screen。代码如下

@media screen and (max-width: 500px) {

}

上面就是所有浏览器中适用我们 and 之后的规则。
关键字
关键字就是用来描述响应条件的描述，具体作用如下：

• and 就是和某种定制的屏幕宽度下；
• not 关键字是用来排除某种指定的媒体类型；
• only 用来定某种特定的媒体类型。

media feature

括号内的它就是用来指定分辨率的。写法如下：

@media only screen and (max-width: 500px) {

}

它的意思就是当浏览器的可视区域小于 500px 时候使用 {} 内的规则，具体规则如下：

经验介绍：我们在设置媒体响应的条件时候，通常使用的是 max-width、min-width、max-height、min-height，这里面有一个比较绕人的地方：
min 代表最小也就是说满足我们设置条件的最小值是多少，比它大的都会满足。
max 则代表的是最大值，比它小的都会满足。

4. 兼容性

5. 实例

1. 当浏览器宽度小于 400px 时候背景色设红色，大于 400px 时候背景色设白色。

@media screen and (max-width:400px){
    html,body{
        background:red;
    }
}

效果图：

2. 使用 only 当浏览器宽度小于 600px 时候背景色设红色，大于 600px 时候背景色设白色。

@media only screen and (max-width:600px){
    html,body{
        background:red;
    }
}

效果图：

3. 使用多个 and 来设置屏幕背景色。

@media only screen and (min-width:600px) and ( max-width:800px){
    html,body{
        background:red;
    }
}

说明：这段代码的意思是当浏览器可视区域大于 600px 小于 800px 背景色为红色。

6. 小结

在工作中媒体查询不只是用来限定 css 文件中使用哪组样式，也可以直接作用在 link 标签上，让页面直接选择什么样的 css 文件。

例如：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

说明：@media 变成了标签属性 media ,上面的意思就是用来区分移动设备是横向还是纵向的。