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
,上面的意思就是用来区分移动设备是横向还是纵向的。