CSS3 Media Queries媒体查询

响应式设计能够适应各种屏幕或者设备展现页面（在不同的设备，页面展现风格可能会有不同）。

解决了各种规格设备给程序员带来的挑战，让网页无论是在传统的电脑，平板电脑或者手机上都能正常展示，下面对媒体查询做一下介绍。 

一.CSS2中的媒体查询:

css2中也有媒体查询的应用，不过比较简单，代码如下：

[HTML] 纯文本查看 复制代码

1 2 3

< link href = "css/reset.css" rel = "stylesheet" type = "text/css" media = "screen" /> < link href = "css/style.css" rel = "stylesheet" type = "text/css" media = "all" /> < link href = "css/print.css" rel = "stylesheet" type = "text/css" media = "print" />

上面的代码分别规定三个css文件分别用于显示器、所有类型设备和打印机。

二.媒体查询使用方式:

媒体查询的使用方式多种多样，基本适合css使用方式一一对应的，罗列如下:

link方式引入:

[HTML] 纯文本查看 复制代码

1	< link href = "css/reset.css" rel = "stylesheet" type = "text/css" media = "screen" />

xml方式引入:

[HTML] 纯文本查看 复制代码

1	<? xml-stylesheet rel = "stylesheet" media = "screen" href = "css/style.css" />

@import方式引入:

[CSS] 纯文本查看 复制代码

1	@import url ( "css/reset.css" ) screen ;

css代码中使用:

[CSS] 纯文本查看 复制代码

1 2 3 4 5

@media screen { 选择器{ 属性：属性值； } }

style标签上使用:

[HTML] 纯文本查看 复制代码

1 2 3

< style type = "text/css" media = "screen" > </ style >

三.媒体查询规则:

css2中的媒体查询非常的简单，仅仅能够区分媒体类型。

css3对媒体查询进行了扩展，不但可以依据媒体的类型，且还可以依据媒体的相关属性。

看如下代码实例:

[HTML] 纯文本查看 复制代码

1	< link rel = "stylesheet" media = "screen and (max-width: 600px)" href = "softwhy.css" />

当页宽度小于或等于600px且应用于屏幕上时，就会调用softwhy.css。

查询规则：

包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。

虽然使用方式不同，定义媒体查询的方式也有所不同，比如media属性方式和@media方式，但是规则都是一样的。

（1）.简单代码:

[CSS] 纯文本查看 复制代码

1 2 3

@media all and ( min-width : 800px ) { }

所有最小水平屏幕宽度为800px的屏幕应用指定的css代码。

特别说明：如果媒体类型是all，all可以省略，all后面的and也可以省略，简写如下:

[CSS] 纯文本查看 复制代码

1 2 3

@media ( min-width : 800px ) { }

（2）.复杂的查询代码：

[CSS] 纯文本查看 复制代码

1 2 3

@media ( min-width : 800px ) and ( max-width : 1200px ) { }

（3）.and 关键词：

and用来规定必须同时满足条件，代码如下：

[CSS] 纯文本查看 复制代码

1 2 3

@media screen ( min-width : 800px ) and ( max-width : 1200px ) { }

当屏幕满足大于等于800px和小于等于1200px时就会使用对应的css代码。

（4）.or关键词：

or用来规定只要满足一个条件即可，代码如下：

[CSS] 纯文本查看 复制代码

1 2 3

@media screen ( min-width : 800px ) or (orientation: portrait ) { }

当屏幕尺寸大约等于800px，或者方向是纵向的时就会使用对应的css代码。

（5）.not关键字:

[CSS] 纯文本查看 复制代码

1 2 3

@media not print { }

not用来规定当不是指定条件时即可成立。

（6）.竖屏或者横屏:

[CSS] 纯文本查看 复制代码

1 2 3

@media (orientation: portrait ) { }

上面的表示当竖屏时应用响应的css样式代码。

[CSS] 纯文本查看 复制代码

1 2 3

@media (orientation: landscape ) { }

上面的表示当横屏时应用响应的css样式代码。