前端提高篇（四十五）CSS进阶10Media媒体查询

orientation : landscape代表横屏，portrait代表竖屏

.wrapper {

width: 100px;

height: 100px;

text-align: center;

background-color: purple;

color: #fff;

}

@media screen and (orientation : portrait) {

.wrapper {

background-color: blue;

color: orange;

}

}

效果：横屏时时默认的背景和字色，竖屏时用media里的背景颜色和字色

逻辑操作符

逗号代表or：

当彩色屏幕是横屏或者屏幕宽度小于600px时，执行media里的样式：

.wrapper {