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"> /*code*/ </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) {   /*code*/ }

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

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

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

1 2 3

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

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

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

1 2 3

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

（3）.and 关键词：

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

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

1 2 3

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

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

（4）.or关键词：

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

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

1 2 3

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

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

（5）.not关键字:

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

1 2 3

@media not print{ /*code*/ }

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

（6）.竖屏或者横屏:

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

1 2 3

@media (orientation:portrait) {   /*code*/ }

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

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

1 2 3

@media (orientation:landscape) {   /*code*/ }

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