css3 多媒体查询

媒体，一类传输信息的介质。

媒体在我们身边息息相关；电视机，手机，电脑等等都是媒体。

我们在前端开发的过程中，面对不同的媒体需要去设计不同的样式。

多媒体类型

值	描述
all	所有设备
print	打印机
screen	电脑，手机
speech	屏幕阅读器

当然我们web前端主要是screen类型。

media 多媒体查询

我们在不同的媒体上引用不同的样式文件，以便达到不同媒体设备的响应式。

<link rel="stylesheet" media="screen" href="screen.css">

我们还可以通过@media来设置srceen设备的不同视口来设置不同的样式

@media screen and (max-width: 300px){
	body {
        background-color:blue;
    }
}
@media screen and (min-width: 300px){
 	body {
        background-color:pink;
    }
}

比如上方我们查询screen类型设备的小于300px时背景颜色为blue，大于300px时为pink。