首先看看官方释义：

@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 的各个属性中 去做条件判断。