首先看看官方释义：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
mediatype 指的是媒体类型，也就是说获取到的设备类型。
以下是css3支持的设备
all 用于所有设备
aural 已废弃。用于语音和声音合成器
braille 已废弃。 应用于盲文触摸式反馈设备
embossed 已废弃。 用于打印的盲人印刷设备
handheld 已废弃。 用于掌上设备或更小的装置，如PDA和小型电话
print 用于打印机和打印预览
projection 已废弃。 用于投影设备
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备
tty 已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv 已废弃。 用于电视和网络电视
也就是说我们可以通过使用 screen 来获取手机设备及电脑屏幕，平板电脑的屏幕信息
and|not|only 相当于条件约束，例如：
@media screen and (内容) 表示获取手机设备及电脑屏幕，平板电脑的屏幕信息，并且该屏幕满足于（）中的条件
@media screen not (内容) 表示获取手机设备及电脑屏幕，平板电脑的屏幕信息，除了该屏幕满足于（）中的条件
only用来定某种特定的媒体类型 ，这个约束主要是针对不支持css3 的浏览器。在实际开发中很少用到，我们就不多介绍。
此时，我们就需要填写 @media mediatype and|not|only (media feature) 中的 media feature部分， media feature官方释义为 媒体功能，通俗的说 就是 我们通过获取到设备了。那么具体是能够获取到哪些信息呢？
由于属性过多，这里就不一个个解释每个属性的用法。 如果读者真想死磕，建议跳转到https://cloud.tencent.com/developer/section/1072197
查看每个属性的用法。本文重点介绍 min-width ,max-width 两个属性，这两个属性在我们开发移动端WEB页面时是最常用的。
min-width ： 表示最小宽度(在实际代码中，我们要理解为：当设备屏幕大于min-width的值时，则满足条件)
max-width : 表示最大宽度(在实际代码中，我们要理解为：当设备屏幕小于max-width的值时，则满足条件)
例如：
@media screen and (min-width: 640px) {
div {
background: yellow;
}
}
div{
width: 100px;
height: 100px;
}
意思就是当设备宽度要大于640px 的时候 则设置div 的背景颜色为黄色
需要注意的是 and 两边一定要有空格
@media screen and (min-width: 640px) and (max-width:960px) {
div {
background: yellow;
}
}
div{
width: 100px;
height: 100px;
}
意思就是设备宽度既要大于640px 同时也要小于 960px，使用这种方式需要注意条件要明确，例如：
@media screen and (min-width: 640px) and (max-width:640px) {
div {
background: yellow;
}
}
这段代码将不起任何作用，也是无意义代码
针对多种设备需要设置多个判断。 可以写多个媒体判断。例如：
//当屏幕宽度大于640px 且 小于960px 则div背景色为黄色
@media screen and (min-width: 640px) and (max-width: 960px) {
div {
background: yellow;
}
}
//当屏幕宽度大于960px则div背景色为红色
@media screen and (min-width: 960px) {
div {
background: red;
}
}
div{
width: 100px;
height: 100px;
}
运行效果：
那么此时，读者可能已经发现一个疑惑，假设我们设置了很多个条件。其中存在不少冲突的那么浏览器会做什么样的选择呢。 例如：
@media screen and (min-width: 640px) and (max-width: 960px) {
div {
background: yellow;
}
}
@media screen and (min-width: 960px) {
div {
background: red;
}
}
@media screen and (max-width: 960px) {
div {
background: blue;
}
}
执行效果：
我们发现，此时div 是不会变为黄色的。很明显，如果出现冲突，那么最后一个会覆盖前面的。
但是实际开发中，可能会存在非常多判断条件。稍微不注意就很容易让我们看晕。这里我向大家推荐使用坐标图的方式理清思路。
就拿上一个案例，我们做一个坐标图。
根据顺序一一罗列出每个条件的条件覆盖区域，左边表示min 右边表示max 如果存在冲突区域，则以最靠近底线的颜色区域为准。
就此本文已经介绍了什么是rem 以及如何判断当前设备宽度。聪明的读者即可通过这两点针对不同的设备设置不同的字体，宽度，高度等数据。
下文我将继续介绍如何通过@media 来实现 根据不同的屏幕让浏览器选择不同的css样式表。同时，也会向各位介绍如果在css 的各个属性中 去做条件判断。