可以针对不同的媒体类型或不同的屏幕尺寸定义不同的样式，媒体类型，包括PC、平板、手机、打印机、电视、屏幕阅读器

媒体查询的引入

link方法引入

<link rel="stylesheet" herf = "responsive.css"  media="mediatype and | not | only (media feature)"></link>
<!-- 举例 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

style方法引入

<style>
@media screen and (max-width: 500px){
  body{
    background: red;
  }
}
</style>

screen：一种媒体类型

and：逻辑操作符，与其相似的还有not,only

(max-width:600px):这个就是媒体特性，说得通俗一点就是媒体条件

媒体查询语法

逻辑操作符
媒体类型(Media Type)
媒体属性(Media Query)

逻辑操作符

not、and、only和逗号(,)

and

and操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真

<!-- 满足横屏以及最小宽度为700px的条件应用样式表 -->
@media all and (min-width: 700px) and (orientation: landscape) { ... }
<!-- 由于不使用not或only操作符的情况下，媒体类型是可选的，默认为 all，所以可以简写为 -->
@media (min-width: 700px) and (orientation: landscape) { ... }

逗号(,)

效果等同于or逻辑操作符，这要有其中一个查询条件为真，则查询返回真

1 2	<!-- 满足最小宽度为700像素或是横屏的手持设备应用样式表 --> @media (min-width: 700px), handheld and (orientation: landscape) { ... }

not

操作符应用于整个媒体查询并对结果取反

<!-- not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询 -->
@media not all and (monochrome) { ... }
//等价于
@media not (all and (monochrome)) { ... }

only

only操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

1	@media only screen { ... }

实际上，only、not、and和or(用逗号表示)这四种逻辑中，只有and比较常用

媒体类型(Media Type)

media属性用于为不同的媒介类型规定不同的样式
all：所有设备
screen：计算机屏幕、平板和手机
print：打印设备
speech：屏幕阅读器

媒体属性(Media Query)

多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”
设备宽高（设备屏幕区域）：device-width | device-height | max-device-width | min-device-height；
宽高（渲染区域）：width | height |max-width | min-height；
设备方向：(orientation){portrait | landscape}
分辨率：(resolution:300dpi){}