媒体查询
# 定义
- 根据不同的属性 以及不同的条件 来选择作用于不同的样式表
- 基于一个或是多个媒体查询的结果来应用样式表的一部分。
- 使用它可以指定一个媒体查询 以及 css 块
# 用法
# 情况 1
作用不同的设备
// 屏幕设备
@media screen {
}
// 打印设备
@media print {
}
// 全部设备
@media all {
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 情况 2
只想作用于屏幕设备
@media only screen {
}
1
2
2
# 情况 3
想作用于视口宽度为 500 的时候
@media all and (width: 500px) {
}
1
2
2
# 情况 4
想作用于小于 1920 大于 500
@media all and (min-width: 500px) and (max-width: 1920px) {
}
1
2
2
# 情况 5
想作用于小于 500 或 大于 1920
@media (max-width: 500px), (min-width: 1920px) {
}
1
2
2