移动时代是任何网页设计师和开发者不可忽略的一个时代，现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示。如何让同一个网站同时适应完全不同尺寸的屏幕，CSS3完美地解决了这些问题。在CSS2.1版本时候，我们曾经为网站设计不同的CSS样式文件，如打印样式表文件，手机样式文件，电脑样式文件等等，css3提出的Media Queries 解决了这些问题。

  CSS3的Media Queries 可以帮助设计师获取以下数据：

 1. 浏览器的窗口的宽度和高度，

 2.设备的宽和高；

 3. 设备的手持方面，横向还是竖向；

 4. 分辨率；

   到目前为止，Media Queries 模块得到了Firefox浏览器、Safari浏览器、Chrome浏览器以及Opera浏览器的支持。

Media Queries的使用方法：

@media  设备类型 and (设备特性){ 样式代码}

在代码的开头必须要写"@media",然后制定设备类型。css中定义了

设备特性的书写放手与样式的书写方式很相似，分为两个部分，当中有冒号分割，冒号前书写设备的某种特性，冒号后书写该特性的具体值

对于这13种设备特性的说明如下表：

使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式，例如：

@media screen and(max-width:639px;)

设备特性的指定值接受min/max的前缀，用来表示大于或者小于等于的逻辑，以此避免使用< 或者 >这些字符。