一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第24天，点击查看活动详情
媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口
你可以根据设备的类型(比如屏幕设备、打印机设备)或者特定的特性(比如屏幕的宽度)来修改你的页面
使用媒体查询的方式
- 结合@import
@import url(./index.css) (max-width: 600px);
- 结合link元素
<link rel="stylesheet" href="./index.css" media="(max-width: 600px)">
- @media
/*
link和@import结合媒体查询的时候，是在符合条件的时候引入对应的css文件
但是@media是在符合条件的时候应用对应的css样式
*/
@media (max-width: 600px) {
body {
background-color: red;
}
}
4，使用JavaScript提供的API
window.matchMedia --- 检测是否符合对应的媒体查询条件
// matchMedia函数的参数是一个字符串，值为媒体查询条件，所以需要加上小括号
// matchMedia函数的返回值一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果
/*
MediaQueryList的形式类似于
{
matches: true --- 媒体查询条件是否匹配
media: "(min-width: 700px)" --- 媒体查询条件
}
*/
if (matchMedia('(min-width: 700px)').matches) {
console.log('设备的尺寸大于或等于700px')
} else {
console.log('设备的尺寸小于700px')
}
const matchFunction = e => console.log(e)
const mediaQuery = matchMedia('(min-width: 700px)')
// matchMedia函数返回的 MediaQueryList对象，有一个属性addListener, 可以在媒体查询发生改变的时候被执行
// 其传入的函数会在从不满足媒体查询条件到满足媒体查询条件或从满足媒体查询条件到不满足媒体查询条件的时候被触发
mediaQuery.addListener(matchFunction)
// 同样的，MediaQueryList对象上存在属性removeListener来移除对应的监听
// 传入的参数必须和addListener时候传入的监听函数是同一个引用
mediaQuery.removeListener(matchFunction)
媒体类型
所谓媒体类型就是设备类型
| 设备类型 | 说明 |
|---|---|
| all | 默认值 表示的是对所有类型的设备都运用一样的样式 |
| screen | 针对浏览器屏幕的变化 |
| 应用于打印机 | |
| speech | 应用于语言合成设备 |
媒体特性
媒体特性(Media features)描述了 浏览器、输出设备，或是预览环境的具体特征
- 通常会将媒体特性描述为一个表达式
- 而每条媒体特性表达式都必须用括号括起来
- 最为常用的媒体特性为设备的宽度或高度
| 特征 | 价值 | 最小/最大 | 描述 |
|---|---|---|---|
| 宽度width | 长度 | 是的 | 渲染表面的宽度 |
| 高度height | 长度 | 是的 | 渲染表面的高度 |
| 颜色color | 整数 | 是的 | 每个颜色分量的位数 |
| 设备比例device-aspect-ratio | 整数/整数 | 是的 | 长宽比 |
| 设备高度device-width | 长度 | 是的 | 输出设备的高度 |
| 设备宽度device-height | 长度 | 是的 | 输出设备的宽度 |
| 方向orientation | “portrait”或“landscape” | 不 | 屏幕方向 |
| 分辨率resolution | 分辨率(“ dpi”，“ dpcm”或“ dppx”) | 是的 | 解析度 |
逻辑操作符(logical operators)
媒体查询的表达式最终会获得一个Boolean值，也就是真(true)或者假(false)
- 如果结果为真(true)，那么就会生效
- 如果结果为假(false)，那么就不会生效
| 逻辑操作符 | 说明 |
|---|---|
| and | and 操作符用于将多个媒体查询规则组合成单条媒体查询 |
| not | not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false |
| only | only运算符仅在整个查询匹配时才用于应用样式 |
| , (逗号) | 逗号用于将多个媒体查询合并为一个规则 |
使用媒体查询来进行简单的移动端模拟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
如果设备宽度小于320px，那么没有对应的媒体查询可以被匹配
就会运用默认的样式 --- 也就是颜色字体为黑色
但一般移动端设备宽度最小为320px，所以小于320px的时候可以不设置
*/
@media (min-width: 320px) and (max-width: 375px) {
body {
color: red;
}
}
@media (min-width: 375px) and (max-width: 414px) {
body {
color: green;
}
}
@media (min-width: 414px) {
body {
color: blue;
}
}
</style>
</head>
<body>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, laborum!
Deserunt repudiandae error pariatur doloremque ullam est labore, fugit ex.
Placeat accusantium dignissimos tempore rem cupiditate quam suscipit incidunt culpa.
Eos maiores minus eum numquam voluptatibus corrupti, nulla modi dolore!
Eaque omnis sunt repellat officia aspernatur dolorum vitae iste deleniti?
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
使用这种写法和之前的写法的不同在于
使用这种写法是运用了css的层叠性
如果宽度为400px的时候
第一条媒体查询和第二条媒体查询都会被匹配上
此时对应的css样式就会被设置两遍
而后边的css样式会把前面的css样式给层叠掉
*/
@media (min-width: 320px) {
body {
color: red;
}
}
@media (min-width: 375px) {
body {
color: green;
}
}
@media (min-width: 414px) {
body {
color: blue;
}
}
</style>
</head>
<body>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, laborum!
Deserunt repudiandae error pariatur doloremque ullam est labore, fugit ex.
Placeat accusantium dignissimos tempore rem cupiditate quam suscipit incidunt culpa.
Eos maiores minus eum numquam voluptatibus corrupti, nulla modi dolore!
Eaque omnis sunt repellat officia aspernatur dolorum vitae iste deleniti?
</body>
</html>
