一直在学习移动端的内容，但是却不知道从何学起，今天看到有关css3 Media Queries的文章，更详细的了解了媒体查询，也让我对移动端学习能更近了一步。先总结如下，以下内容也是从 转载摘录的，不算是自己的东西，只是用来学习而已，如想了解具体的可以查看这个点击此处查看：http://www.w3cplus.com/content/css3-media-queries
Media Queries就是所熟悉的“媒体查询”，我们经常见到从样式表中或页面中看到的media的内容。
个人觉得media Queries应该是包括media type（媒体类型）和media query（媒体特性）两个内容
媒体类型（media type）
在css2中就有这个特性，并且是非常有用的属性，表示可以通过媒体类型对不同的设备指定不同的样式，css2中经常遇到的是all（全部）、screen（屏幕）、print（页面打印或打印预览模式），css2中w3c总共列出了10中媒体类型。
那引入媒体类型的方法也有多种
1、link方法引入
2、xml方式引入
3、@import方式引入
@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是在<head></head>中的<style>...</style>中引入，单这种使用方法在ie6-7都不被支持 如
样式文件中调用另一个样式文件：
@import url("css/reset.css") screen; @import url("css/print.css") print; 在中的中调用： 4、@media引入
这种引入方式和@import是一样的，也有两种方式：
样式文件中使用：
@media screen{ 选择器{ 属性：属性值； } } 在>/head>中的中调用： 媒体类型（media type） Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)，常用的特性w3c共列出来13种. 常用的Media Query如下表所示： 兼容的浏览器： 一、最大宽度Max Width 二、最小宽度Min Width 三、多个Media Queries使用
四、设备屏幕的输出宽度Device Width
上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率
shang
专门针对iphone4的移动设备写的 六、iPad
在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说上面的例子，在纵向(portrait)时采用portrait.css来渲染页面；在横向（landscape）时采用landscape.css来渲染页面。
七、android
/*240px的宽度*/ /*360px的宽度*/ /*480px的宽度*/ 我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。
八、not关键字
not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。 九、only关键字
only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。 十、其他 在Media Query中如果没有明确指定Media Type，那么其默认为all，如：
另外还有使用逗号（，）被用来表示并列或者表示或，如下
上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。 Media Queries能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果