CSS3 Media Queries媒体查询

http://www.softwhy.com/article-925-1.html
响应式设计能够适应各种屏幕或者设备展现页面（在不同的设备，页面展现风格可能会有不同）。解决了各种规格设备给程序员带来的挑战，让网页无论是在传统的电脑，平板电脑或者手机上都能正常展示，下面对媒体查询做一下介绍。 一.CSS2中的媒体查询:css2中也有媒体查询的应用，不过比较简单，代码如下：[HTML] 纯文本查看 复制代码上面的代码分别规定三个css文件分别用于显示器、所有类型设备和打印机。二.媒体查询使用方式:媒体查询的使用方式多种多样，基本适合css使用方式一一对应的，罗列如下:link方式引入:[HTML] 纯文本查看 复制代码xml方式引入:[HTML] 纯文本查看 复制代码@import方式引入:[CSS] 纯文本查看 复制代码css代码中使用:[CSS] 纯文本查看 复制代码style标签上使用:[HTML] 纯文本查看 复制代码三.媒体查询规则:css2中的媒体查询非常的简单，仅仅能够区分媒体类型。css3对媒体查询进行了扩展，不但可以依据媒体的类型，且还可以依据媒体的相关属性。看如下代码实例:[HTML] 纯文本查看 复制代码当页宽度小于或等于600px且应用于屏幕上时，就会调用softwhy.css。查询规则：包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。虽然使用方式不同，定义媒体查询的方式也有所不同，比如media属性方式和@media方式，但是规则都是一样的。（1）.简单代码:[CSS] 纯文本查看 复制代码所有最小水平屏幕宽度为800px的屏幕应用指定的css代码。特别说明：如果媒体类型是all，all可以省略，all后面的and也可以省略，简写如下:[CSS] 纯文本查看 复制代码（2）.复杂的查询代码：[CSS] 纯文本查看 复制代码（3）.and 关键词：and用来规定必须同时满足条件，代码如下：[CSS] 纯文本查看 复制代码当屏幕满足大于等于800px和小于等于1200px时就会使用对应的css代码。（4）.or关键词：or用来规定只要满足一个条件即可，代码如下：[CSS] 纯文本查看 复制代码当屏幕尺寸大约等于800px，或者方向是纵向的时就会使用对应的css代码。（5）.not关键字:[CSS] 纯文本查看 复制代码not用来规定当不是指定条件时即可成立。（6）.竖屏或者横屏:[CSS] 纯文本查看 复制代码上面的表示当竖屏时应用响应的css样式代码。[CSS] 纯文本查看 复制代码上面的表示当横屏时应用响应的css样式代码。