一、什么是媒体查询

媒体查询用于找出浏览器的可视宽度，并根据不同的浏览器可视宽度使用不同的css样式。这个特点叫做响应式布局，他能找出当前用户使用的浏览器可视区域的宽度并通过媒体查询做出相应（判断浏览器的可视区宽度加载不同的css样式）。

二、媒体查询的优势

1、媒体查询技术可以只需要维护一份原始的css文件，就能够让网页在最新的浏览器和移动设备上使用。

2、用户浏览器宽度发生变化时能够非常简单的实现动画效果。

3、如果想让网站适应所有的设备，却不想使用媒体查询:

　　1.我们可以使用mobile app，这是一个好方法，你可以创建一些非常漂亮的app，用户可以通过它直接在手机上访问你的网站，当网站有更新时还可以产生提醒，问题是常见app比使用媒体查询需要更多的资源。不同的设备操作系统也是一个问题，如果想创建一个app，你需要为IOS，Android，Windows Mobile，Blackberry等等各创建一个，而媒体查询能够让网站适应任何设备。

　　2.另外一种替换方案是使用jQuery Mobile，它创建的基于HTML5的网站能适应大多数的移动设备。问题是它需要在网站上维护另外一个系统。

　　　还用一个与jQuery Mobile类似的方案就是使用服务器端来找出用户使用的是什么浏览器，根据浏览器使用不同的样式表。问题是需要维护大量的css文件版本以适应不同的浏览器。

三、媒体查询的引用

@media only screen
 
and (min-width : 768px)

and (max-width : 1024px) {

/* Styles */

}

四、css的动态改变

通过使用css我们可以为不同的元素以及这些元素的不同属性增加动画效果。

使用媒体查询的主要目的之一就是改变元素的大小以适应网页。在改变元素大小的过程中可以产生动画，我们可以使用一下代码为css的width和height属相添加动画。

/* webkit */

-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 1s;
 
/* moz */
 
-moz-animation-property: -moz-width;
-moz-animation-property: -moz-height;
-moz-transition-duration: 1s;
 
/* opera */

-o-animation-property: -o-width;
-o-animation-property: -o-height;
-o-transition-duration: 1s;

在媒体查询中加入动画效果主要原因是当屏幕尺寸发生改变时动画效果能给用户更好的体验。该技术的主要使用场景是只能手机或者平板电脑的横竖屏切换，当屏幕尺寸发生改变时就在媒体查询中增加了动画效果。