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

@media screen and (max-width : 600px) {

.wrapper {

width: 100px;

height: 100px;

text-align: center;

background-color: blueviolet;

}

}

也能达到同样效果

有些样式，无论是否符合media条件，都需要执行；这些代码就可以放在media以外的公共区域，把有变动的写在media里即可

媒体类型：常用的是彩色屏幕screen，也可以设置成all，匹配所有类型

媒体特性：最常用的有：min-width，max-width

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

.wrapper {

width: 100px;

height: 100px;

text-align: center;

background-color: purple;

color: #fff;

}

@media screen and (orientation : portrait) {<