media 媒体查询

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

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

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

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

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

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

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

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

< 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 mediatype and|not|only (media feature) {
    CSS Code
}

说明： @media 不同于其它的 CSS3 ，它是，后面跟了，和大括号，这和我们 JavaScript 很像，大家也可以这么理解。

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

mediatype 有表：

说明：我们常用的通常设置为 screen。如下

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

}

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

media feature

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

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

}

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

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


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

图：

<!DOCTYPE html>
<html lang="en">
<head>
    < charset="UTF-8">
    < name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

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

</style>
<body>
    
</body>
</html>


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

图：

<!DOCTYPE html>
<html lang="en">
<head>
    < charset="UTF-8">
    < name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

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


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

<!DOCTYPE html>
<html lang="en">
<head>
    < charset="UTF-8">
    < name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

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

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

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

例如：

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

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

←Grid 行和列

only 元素选择→

media 媒体查询

您的鼓励是对我最大的支持