媒体查询类型（没有优先级）

/* 只有在打印机或打印预览才会应用的样式 */
@media print {
	/* 这里写正常样式 */
}
/* 只有在屏幕上才会应用的样式 */
@media screen {
	/* 这里写正常样式 */
}
/* 一直应用的样式 */
@media all {
	/* 这里写正常样式 */
}

媒体查询特性（没有优先级）

/* 检测到视口宽度等于800px时使用如下样式 */
@media (width: 800px) {
	/* 这里写正常样式 */
}
/* 检测到视口宽度小于等于700px时使用如下样式 */
@media (max-width: 700px) {
	/* 这里写正常样式 */
}
/* 检测到视口宽度大于等于900px时使用如下样式 */
@media (min-width: 900px) {
	/* 这里写正常样式 */
}

/* 检测到视口高度等于900px时使用如下样式 */
@media (height: 800px) {
	/* 这里写正常样式 */
}
/* 检测到视口高度小于等于700px时使用如下样式 */
@media (max-height: 700px) {
	/* 这里写正常样式 */
}
/* 检测到视口高度大于等于900px时使用如下样式 */
@media (min-height: 900px) {
	/* 这里写正常样式 */
}

/* 检测到屏幕宽度等于1920px时使用如下样式 */
@media (device-width:1920px) {
	/* 这里写正常样式 */
}

媒体查询运算符（没有优先级）

/* 且运算符，宽度大于等于700px且小于等于800px时使用如下样式 */
@media (min-width: 700px) and (max-width: 800px) {
	/* 这里写正常样式 */
}
@media screen and (min-width: 700px) and (max-width: 800px) {
	/* 这里写正常样式 */
}
/* 或运算符，宽度小于等于700px或大于等于800px时使用如下样式 */
@media (max-width: 700px) or (min-width: 800px) {
	/* 这里写正常样式 */
}
/* 否定运算符 */
@media not screen {
	/* 这里写正常样式 */
}
/* 肯定运算符，处理IE兼容性问题，出现only忽略整个样式 */
@media only screen and (width: 800px) {
	/* 这里写正常样式 */
}

常用阈值

**768、992、1200**

**引入不同设备宽度的css文件**

<link rel="stylesheet" media="screen and (min-width: 1200px)" href="">

文件内直接写样式就行，不需要再写@media only screen and (min-width: 1200px) {}