媒体查询 @media

出自CSS3,让内容的呈现根据设备不同,在一定范围内,应用不同的样式,而不用改变内容本身。一个媒体查询有一个可选的设备类型(screen、print、默认为all)和0到多个设备特性比如横屏,min-width等组成。如果媒体查询中指定的媒体类型与文档展示的设备匹配,并且所有的表达式返回为true,则会应用后面的样式。

语法

应用到样式表中:

1
2
3
4
5
6
7
8
<style>
@media screen and (min-width : 700px) and (orientation: landscape) {
//样式
}
@media (max-width: 100px) {
//样式
}
</style>

link元素中的media属性

当满足link中的媒体查询,文档 应用 example.css样式,但不论是否满足,都会下载example.css。

1
<link rel = "stylesheet" media = "screen and (min-width: 700px)" href = "example.css">

操作符

not

应用于当前的媒体查询,不会影响其他的媒体查询,会把当前媒体查询的所有查询否定。

1
2
3
4
5
6
7
8
9
10
@meida not (max-width: 700px) and (orientation: landscape), print and (color) {

//样式
}
//等价于

@meida not ((max-width: 700px) and (orientation: landscape)), print and (color) {

//样式
}

and

合并多个媒体属性或合并媒体属性和媒体类型

1
2
3
@media tv and (min-width: 700px) and (orientation: landscape) {
//样式
}

only

防止不支持媒体查询属性的老旧浏览器应用到样式,原理是媒体属性使用场景是css3新增的,一些老旧浏览器只支持css2有的@media screen{},所以当@media only screen…时,老旧浏览器会解析为“media=only”,并没有only的设备,所以不会应用后面的样式。

@import 从其他样式表导入样式规则

@import url media query
必须先于所有其他规则
tips
想起之前有一个import语法报错:
Import in body of module; reorder to top import/first
原因:
import 必须在其它所有业务代码前面(eslint 暴出)

1
2
@import "./example.css";
@import url("chrome://communicator/skin/") screen and (color);

@keyframes 关键帧

用于animation创建动画效果。每个@keyframes规则包含很多关键帧,用百分比命名或者关键字“from”(代表0%),“to”(100%)命名。

1
2
3
4
5
6
7
8
9
10
11
12
div.animate {
width: 100px;
animation: 2s move linear 1s infinite alternate; // 动画将延迟1s后,匀速无限次2s往返运动(从左往右再回来)
}
@keyframes move {
0% {
width: 100px;
}
100% {
width: 600px;
}
}

如果0%关键帧的样式和元素css原本的冲突了,会以0%的为准,正常的被覆盖,而不是突变。