使用 @media 查询,可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式。常用来做响应式开发,一套代码可以兼容设备。提高代码的复用性和可移植性。
下面是简单的用法:
/*当屏幕宽度 >= 300px时 运行这段代码*/
@media screen and (min-width: 300px) {
body {
background-color: skyblue;
}
}
/*当屏幕宽度 >= 480px时 运行这段代码*/
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
/*当屏幕宽度 <= 480px时 运行这段代码*/
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}