@media 媒体查询这个属性通常是用在不同屏幕下可以设置不同的样式，它多用在响应式页面中。 1. 官方定义@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 2. 解释@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 之后的规则。
media feature 括号内的它就是用来指定分辨率的。写法如下： @media only screen and (max-width: 500px) {
}它的意思就是当浏览器的可视区域小于 500px 时候使用 {} 内的规则，具体规则如下：
经验介绍：我们在设置媒体响应的条件时候，通常使用的是 max-width、min-width、max-height、min-height，这里面有一个比较绕人的地方： 4. 兼容性
5. 实例
@media screen and (max-width:400px){
html,body{
background:red;
}
}效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta 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>
<Meta charset="UTF-8">
<Meta 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>
<Meta charset="UTF-8">
<Meta 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 背景色为红色。 6. 小结在工作中媒体查询不只是用来限定 css 文件中使用哪组样式，也可以直接作用在 link 标签上，让页面直接选择什么样的 css 文件。 例如： <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css"> 说明：@media 变成了标签属性 media ,上面的意思就是用来区分移动设备是横向还是纵向的。 |
