根据不同的媒体特征使用不同的样式
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}
使用案例
/** 屏幕宽度大于1000px，或屏幕宽度大于700px，使用该样式 */
@media only screen and (min-width: 1000px) , screen and (min-width: 700px) {
#app {
color: aqua;
}
}
/** 屏幕宽度在700到1000之间 */
@media only screen and (max-width: 1000px ) and ( min-width: 700px) {
#app {
color: aqua;
}
}
/** 屏幕宽度大于700，并且高度大于500 */
@media only screen and (min-width: 700px ) and ( min-height: 500px) {
#app {
color: aqua;
}
}
/** 屏幕宽度大于1000，或者高度大于7000 */
@media only screen and (min-width: 1000px) , screen and (min-height: 700px) {
#app {
color: aqua;
}
}
not：不满足后面的条件时使用大括号内的样式
only：满足后面的条件时使用大括号内的样式
,：逗号相当于或者
