媒体查询的关键字是,媒体查询的用法

css中@media only screen and (max-width:639px){

这位网友你好，这是媒体查询代码，表示只有在屏幕尺寸小于639像素的时候才会应用下面的样式。如果想要在手机端自适应，你还需要写上下面这句话。

meta?name="viewport"?content="width=device-width,?initial-scale=1"/

css3媒体查询为什么不见max

一、在 head 链接CSS文件时提供判断语句，选择性加载不同的CSS文件

Html代码

link rel="stylesheet" href="middle.css" media="screen and (min-width: 400px)"

这句意味在满足 media 的判断语句 screen and (min-width: 400px) 即 屏幕并且最小宽度不小于400px 的介质上面使用 middle.css 。

二、在CSS文件中分段书写不同设备的代码

Html代码

/* CSS Code */

@media screen and (min-width: 600px) { /* CSS Code */ }

@media screen and (max-width: 599px) { /* CSS Code */ }

相信这个代码也很容易理解，写在 @media 语句段外的是共用代码，第一个 @media 语句段是 屏幕以及最小宽度600px ，第而个 @media 语句段是 屏幕以及最大宽度599px 。

如果不同的代码段有冲突或者重叠，会按照CSS原本的代码优先级排序，即后方代码替代前方代码，等等。

三、媒体介质类型

CSS3中提供了多种媒体介质类型，虽然常用的就俩……注意媒体类型名称区分大小写，并且尽管有些介质类型有重合，但是一个平台只会有一种介质类型。（我猜这个标准很多浏览器不会遵守吧？）

all – 全部媒体类型

braille – 盲文触摸装置

embossed – 分页盲文打印机 （W3C的无障碍做的真细心……）

handheld – 小屏幕和流量有限的手持设备（注意！安装标准来说移动设备都应该使用这个介质类型，但是实际上安卓根本不理会这个介质，请使用 screen 结合媒体查询语句使用）

print – 提供给打印机的样式，最常用的介质类型，打印页面时获得适合阅读的效果

projection – 投影，给投影机使用（有人用？）

screen – 彩色屏幕，最常用的介质类型，一般和屏幕大小表达式联合使用

speech – 语音朗诵，用于屏幕阅读软件（和将来的Siri？）

tty – 固定间距字符网格，例如功能机那样的

tv – 智能电视设备（唔不知道我家的创维酷开支持如何……）

四、媒体查询语句

除了媒体介质，我们还能通过 and 使用 Media Query 语句，达到对屏幕大小的判断生成响应式布局。（可以通过改变浏览器窗口大小在桌面下测试效果）

一个 Media Query 包含一种媒体类型，如果媒体类型没有指定，那么就是默认类型all，比如：

Html代码

media="(max-width: 600px)"

也可以使用 and 表示同时满足这两者时生效，达到限定范围：

Html代码

handheld and (min-width:20em) and (max-width:50em)

逗号 , 被用来表示 并列 和 或者 ：

Html代码

handheld and (max-width:20em), screen and (max-width:30em)

not 用来排除符合表达式的设备：

Html代码

not screen and (color)

下面来解释一下遇到冲突时的机制：

Html代码

link rel="stylesheet" href="styleA.css" media="screen and (min-width: 800px)"

link rel="stylesheet" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)"

link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)"

上面将设备分成3种，分别是宽度大于800px时，应用 styleA ，宽度在600px到800px之间时应用 styleB ，以及宽度小于600px时应用 styleC 。那假如宽度正好等于800px时该应用那个样式？是 styleB，因为前两条表达式都成立，按CSS默认优先级规则后者覆盖了前者。

因此，为了避免冲突，这个例子正常情况应该这样写：

Html代码

link rel="stylesheet" href="styleA.css" media="screen"

link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)"

link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)"

五、浏览器支持

媒体介质在CSS2中已经被添加，因此主流平台的浏览器毫无疑问都可以正确支持。但是 Media Query 语句是CSS3中添加的新功能，部分浏览器可能并不理解。例如IE能成功解读媒体介质，但是却无法解读 and 后面的媒体查询语句，就会连带媒体介质一起忽略。为了让不识别媒体查询语句的浏览器依然识别到媒体介质，可以使用 only 关键字进行hack。

Html代码

link rel="stylesheet" href="example.css" media="only screen and (color)"

添加了 only 关键字后，支持媒体查询语句的浏览器依然正常解析。但不支持媒体查询语句但正确读取媒体介质的设备，由于先读取到 only 而不是 screen ，将忽略这个样式。不支持媒体查询的IE不论是否有 only ，都直接忽略样式。

最后是浏览器支持情况：

IE8-

IE9+

Chrome 5+

Opera 10+

Firefox 3.6+

Safari 4+

什么叫media query

Media Queries详解

Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码：

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" /

或者这样的形式：

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

@import url("css/style.css");

/style

不知道大家留意没有，其中两种方式引入CSS样式都有一个共同的属性“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型，

如屏幕（screen）和打印（print）的样式表，当然还有其他的，比如说“TV”,“handheld”等，其中“all”表示的是支持所有媒体介质。有关于更多的Media类型，可以点击这里。

上面简单说了一下HTML4和CSS2的“Media Queries”,而今天的主要是来学习CSS3中的"Media Queries"的更多使用方法和相关知识，下面我们开始进入今天的主题。

CSS3中的Media Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的 样式表。

换句简单的说，“在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表”。

现在最常见的一个 例子，你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，

让你制 作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。

首先来看一个简单的实例：

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

上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容：

1、screen：这个不用说大家都知道，指的是一种媒体类型；

2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；

3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。

前面这个简单的实例引出两个概念性的东西，一个就是媒体类型（Media Type）和 媒体特性（Media Query），首先一起来理解一下这两个概念：

一、媒体类型(Media Type)

媒体类型(Media Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是 all（全部）,screen（屏幕）

,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。

页面中引入媒体类型方法也有多种：

1、link方法引入

link rel="stylesheet" type="text/css" href="../css/print.css" media="print" /

2、xml方式引入

?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？

3、@import方式引入

@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是 在head/head中的style.../style中引入，单这种使用方法在 ie6-7都不被支持 如

样式文件中调用另一个样式文件：

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

@import url("css/print.css") print;

在head/head中的style.../style中调用：

head

style type="text/css"

@import url("css/style.css") all;

/style

/head

4、@media引入

这种引入方式和@imporr是一样的，也有两种方式：

样式文件中使用：

@media screen{

选择器{

属性：属性值；

}

}

在head/head中的style.../style中调用：

head

style type="text/css"

@media screen{

选择器{

属性：属性值；

}

}

/style

/head

以上几种方法都有其各自的利弊，在实际应用中我建议使用第一种和第四种，因为这两种方法是在项目制作中是常用的方法，对于他们的具体区别，我就不说了，想了解的大家可以去找度娘或G爸，

他们能帮你解决。

二、媒体特性（Media Query）

前面有简单的提到，Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)，常用的特性w3c共列出来13种。

具体的可以参阅：Media features。为了更能理解Media Query，我们在次回到前面的实例上：

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

转换成css中的写法为：

@media screen and (max-width: 600px) {

选择器 {

属性：属性值；

}

}

其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){...}的大括号之中。在语句上面的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在：

1、Media query只接受单个的逻辑表达式作为其值，或者没有值；

2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；

3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况

4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种

常用的Media Query如下表所示：

兼容的浏览器：

下面我们一起来看看Media Queries的具体使用方式

一、最大宽度Max Width

link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" /

上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。

二、最小宽度Min Width

link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" /

上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。

三、多个Media Queries使用

link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" /

Media Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type。

正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

四、设备屏幕的输出宽度Device Width

link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" /

上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率

五、iPhone4

link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /

上面的样式是专门针对iPhone4的移动设备写的。

六、iPad

link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /

link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" /

在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说 上面的例子，在纵向(portrait)时采用portrait.css来渲染页面；

在横向（landscape）时采用landscape.css来渲 染页面。

七、android

/*240px的宽度*/

link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" /

/*360px的宽度*/

link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" /

/*480px的宽度*/

link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" /

我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。

八、not关键字

link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" /

not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。

九、only关键字

link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" /

only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。

其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，

因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。

十、其他

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" /

另外还有使用逗号（，）被用来表示并列或者表示或，如下

link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" /

上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。

关于Media Query的使用这一节就介绍到此，最后总体规纳一下其功能，个人认为就是一句话：Media Queries能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。

css3 中的媒体查询是什么，怎么用？

你这段代码是在移动端的时候用的：

name="viewport"是视窗的意思，

width=device-width就是页面宽度自适应设备宽度，

initial-scale=1.0是默认页面缩放比例，1.0就是不缩放，

user-scalable=no是禁止用户手动缩放页面。

至于CSS3媒体查询，就是根据页面分辨率设置不同的css样式，达到自适应的目的。用法说简单也简单，说复杂也复杂，给你个简单的实例吧：

@media?screen?and?(max-width:?760px)?{

????body?{

????????background:#000;

????}

}

上面这段代码的意思是：当屏幕宽度小于760px时，页面背景色会变为黑色

css3 iphone5的媒体查询怎么写

可以用谷歌浏览器里面有iPhone5的尺寸，然后用媒体查询它的宽度就行了

@media screen ?and (max-width: 320px) {}

什么叫媒体查询？很多企业官网上都有这么一栏的，是什么意思？

移动设备的快速普及完全颠覆了Web设计领域。用户不再仅在传统桌面系统上查看Web内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。Web设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错，在小型的电话以及介于它们之间的各种设备上看起来也不错。媒体查询是向不同设备提供不同样式的一种不错方式，它为每种类型的用户提供了最佳的体验。作为CSS3规范的一部分，媒体查询扩展了media属性（控制您的样式应用方式）的角色。例如，多年来人们常常使用一种独立的样式表，通过指定media="print"来打印网页。媒体查询将这一理念提升到了更高层次，允许设计人员基于各种不同的设备属性（比如屏幕宽度、方向等）来确定目标样式。图1-3演示了媒体查询的实际应用。它们显示了相同网页在桌面浏览器中、平板电脑上和iPod touch上查看的效果。

图1. 当在桌面上查看时，该网页拥有一种两栏布局。

在桌面版本中，该网页拥有一种固定宽度、两栏的布局。但当在平板电脑上查看相同页面时，边栏将移动到主要内容下方。

link href="css/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 649px)"

图2. Media Queries对话框

当在iPod touch中查看时，菜单会重新排列，图像会缩小。使用媒体查询为每种设备提供了不同的样式。

图3. 媒体查询重新设置页面的样式，以适应小得多的屏幕的限制。

本文概述媒体查询，包含将帮助您快速开始自己的多屏幕网站开发的示例。注意： 确保也查阅了Adobe TV上的以下视频：“Dreamweaver中的CSS3媒体查询”和“媒体查询如何使针对移动设备和不同屏幕的设计变得更加轻松”。

媒体查询示例

媒体查询的一个简单示例可能如下所示：

link href="css/phone.css" rel="stylesheet" type="text/css"

media="only screen and (max-width: 400px)"

在此示例中，将媒体查询添加到了link标记中。在后面将会看到，您也可以在样式表中使用媒体查询。media属性是该查询实际所在的地方。这个示例如下所示：

only screen and (max-width: 400px)

该示例的含义应该很明显：仅将此样式表应用到拥有屏幕的设备，并且仅在浏览器窗口的宽度不超过400像素时应用。您可以从文件名phone.css上看出，这个特定的查询是为电话样式设计的。现在您已看到了一个示例，让我们更详细分析一下媒体查询，以及您可用于控制在何处应用样式的设备功能。

媒体查询支持和功能

媒体查询支持Internet Explorer (IE) 9及更高版本、Firefox 3.5及更高版本、Safari 3及更高版本、Opera 7及更高版本，以及大部分现代智能电话和其他基于屏幕的设备。尽管IE的早期版本不支持媒体查询，但您可以（而且应该）从现在开始使用它们。处理早期浏览器的策略将在本文后面探讨。表1列出了可用于媒体查询中的设备功能。表1. 用于设置媒体查询中的条件的媒体功能功能值最大 / 最小值描述width长度是显示区域的宽度height长度是显示区域的高度device-width长度是设备的宽度device-height长度是设备的高度orientationportrait或landscape否设备的方向aspect-ratio高宽比（宽/高）是设备的宽高比，使用由1个斜杠分开的两个整数表示（比如16/9）device-aspect-ratio高宽比（宽/高）是设备宽度与设备高度的比率color整数是每种颜色成分的位数（如果不是颜色，该值为0）color-index整数是输出设备的颜色查找表中的项数monochrome整数是单色镇缓冲区中每像素的位数（如果不是单色，该值为0）resolution分辨率是输出设备的像素密度，表示为整数后跟dpi（每英寸点数）或dpcm（每厘米点数）scanprogressive或interlace否TV设备使用的扫描过程grid0 或 1否如果设置为1，设备基于网格，比如电传类型的终端或仅有一种固定字体的电话显示设备（所有其他设备均为0）表1中的前5项功能 ( width , height , device-width , device-height , 和 orientation ) 是最有用的。您可以为大部分功能添加 min- 和 max- 作为前缀，以表示最小和最大值，比如 min-width 和max-width 。表 1 中的“最大值/最小值”列表是哪些功能可通过此方式修改。

width、device-width和viewport

媒体查询的一个最容易混淆的方面或许就是width和height与添加了前缀device-的类似值之间的区别。对于桌面和平板计算机，它们之间的区别很容易理解：width 和 height指浏览器视区的尺寸，而device-width和device-height指显示器的尺寸。不是每个人都会全屏运行他或她的浏览器，所以width 和height是您需要使用的度量方法。移动浏览器将填满可用的屏幕，所以您可能期望width和device-width是相同的。不幸的是，并不总是这样。大多数智能电话（包括Android、iPhone和Windows Phone 7）将width设置为大约1,000像素宽的标称视区（在iPhone和iPod touch中，它为980像素；Windows Phone 7使用1024像素）。图4展示了iPod touch通常如何显示前面插图中的示例页面。

图4. 默认情况下，现代移动设备会缩放网页来适合所估计的视区。

即使附加到页面上的样式表使用媒体查询，依据min-width 和 max-width 的值来提供不同样式，iPod touch会忽略这些样式并显示桌面版本，因为它的视区被视为980像素宽。更让人混淆的是，iPhone、iPod touch和iPad在计算宽度时不会考虑方向，而其他设备会。幸运的是，这种混淆情形有一个简单的解决方案。苹果公司设计了一个新的meta标记，它已被其他移动设备制造商广泛采用，已合并到可能会被万维网联盟（W3C）批准的规范中。要为支持媒体查询的所有设备提供公平的机会，只需向每个网页的head添加以下这行代码：

meta name="viewport" content="width=device-width, initial-scale=1"

这告诉移动设备，将视区视为具有设备的物理宽度相同的宽度。而且，它还告诉iPhone、iPod touch和iPad在计算宽度时考虑方向。这样，您可以在媒体查询中安全地使用width，因为您知道它的用途与您所想的相同。注意：许多移动设备（最显著的就是iPhone 4和iPad 2）拥有高分辨率的显示屏，具有比桌面或平板显示器高得多的像素密度。这不会影响您在CSS中计算像素大小的方式。CSS规范要求，如果输出设备的像素密度与典型计算机显示器的像素密度差别巨大，浏览器应该重新调节像素值。一些开发人员现在将像素度量方法称为CSS像素。

如何编写媒体查询

要将媒体查询添加到media属性中，您可以使用表1中的媒体功能设置一个或多个条件。与CSS属性一样，在一个冒号后指定媒体功能的值。每个条件包含在圆括号中，使用关键字and添加到媒体声明中。例如：

media="screen and (min-width: 401px) and (max-width: 600px)"

媒体查询是布尔值：它们要么为true，要么为false。如果整条语句为true，那么将应用样式表。如果为false，将忽略样式表。所以当使用上述查询时，所有部分必须为true，才会应用样式表。换句话说，它将仅适用于401到600像素宽的屏幕。一些媒体功能（比如color , monochrome ， 和 grid）可用作条件，而无需指定一个值。例如，以下语句适用于所有彩色显示器：

media="screen and (color)"

指定备用功能没有or关键词可用于指定备用的媒体功能。相反，可以将备用功能以逗号分割列表的形式列出，比如：

media="screen and (min-width: 769px), print and (min-width: 6in)"

这会将样式应用到宽度超过769像素的屏幕或使用至少6英寸宽的纸张的打印设备。指定否定条件要指定否定条件，可以在媒体声明中添加关键字not，比如：

media="not screen and (monochrome)"

不能在单个条件前使用not。该关键字必须位于声明的开头，而且它会否定整个声明。所以，上面的示例会应用于除单色屏幕外的所有设备。向早期浏览器隐藏媒体查询媒体查询规范还提供了关键字only，它用于向早期浏览器隐藏媒体查询。类似于not，该关键字必须位于声明的开头。例如：

media="only screen and (min-width: 401px) and (max-width: 600px)"

无法识别媒体查询的浏览器要求获得逗号分割的媒体类型列表，规范要求，它们应该在第一个不是连字符的非数字字母字符之前截断每个值。所以，早期浏览器应该将上面的示例解释为：

media="only"

因为没有only这样的媒体类型，所以样式表被忽略。类似地，早期浏览器应该将以下语句解释为media="screen"：

media="screen and (min-width: 401px) and (max-width: 600px)"

换句话说，它应该将样式规则应用于所有屏幕设备，即使它不知道媒体查询的含义。不幸的是，IE 6–8未能正确实现该规范。没有将样式应用到所有屏幕的设备，它将整个样式表一起忽略。尽管存在此行为，如果希望向其他不太常用的浏览器隐藏样式，仍然建议在媒体查询前面添加上only。处理早期的Internet Explorer版本IE 6到IE 8中缺少对媒体查询的支持，这不是问题。只需创建一组用于所有未使用媒体查询的浏览器的基本样式，而使用媒体查询为使用更高级浏览器的访问者提供一种增强的体验。也可以使用Internet Explorer条件注释来向早期版本的IE提供一组特殊的规则，比如：

!--[if lt IE 9 !IEMobile]

link href="iestyles.css" rel="stylesheet" type="text/css"

![endif]--

结合使用媒体查询与@import和@media

除了在附加外部样式表时在link标记中使用媒体查询，您也可以将它们与@import 和 @media结合使用。基本语法是相同的。例如，以下代码导入一个样式表，并将该样式应用到拥有不宽于400像素的屏幕的设备：

@import url("phone.css") only screen and (max-width:400px);

媒体查询也可像如下这样用于样式表中：

@media only screen and (max-width:400px) {

#navbar {

float: none;

width: 400px;

}

}

测试媒体查询

测试代码很重要。针对平板电脑和智能电话进行测试使测试变得更复杂，因为理想情况下您将有大量设备需要处理。幸运的是，无需拥有实际的设备，即可测量大多数查询。拥有真实的设备总是会更好，但出于本文的用途，使用简单的浏览器将有助于您理解查询的工作原理。本文所附带的ZIP文件包含一个范例文件（mediaqueries.html），该文件附加了3种不同的设计。使用范例文件执行以下调节测试。将浏览器窗口完全打开，您可以看到基本的站点设计（参见图1）。将浏览器窗口缩小，在进入各种设备的尺寸范围时可以注意到变化。进入代码中指定的尺寸范围时，样式会更改为平板电脑（图2）或电话大小（图3）。例如，对于平板电脑，页眉图像会变得更小，下面的独立区域会呈现不同的形式。对于电话样式，主要的中央图像会消失，替换为由更大的垂直按钮组成的菜单。浏览器在每次窗口更改时都会检查媒体查询，比如当您调整它时，或者当您将电话从竖向旋转到横向时。

Dreamweaver CS5.5中的媒体查询

Dreamweaver CS5.5在Adobe在针对Dreamweaver CS5的11.0.3更新中引入的媒体查询支持之上进行了改进。新的Media Queries对话框可帮助您为一个页面或整个网站创建和维护媒体查询（参见图5）。您可以从以下任何位置访问Media Queries对话框：Modify Media QueriesMultiscreen Preview面板 Media Queries按钮Multiscreen下拉菜单 Media QueriesCSS Styles面板右上角的Options菜单CSS Styles面板中的上下文菜单

图5. Dreamweaver CS5.5中的Media Queries对话框

使用这个新对话框，您可以：创建多个媒体查询。将媒体查询附加到当前页，这会添加一个或多个CSS文件的链接。创建一个site-wide媒体查询文件，这会添加一个集中化的CSS文件的链接，该文件导入其他特定于设备的CSS文件。当使用site-wide选项时，您可以链接到现有的CSS文件，或者从对话框自身中创建新文件。Media Queries对话框还将在查询上方使用您作为描述而添加的文本创建一个注释。此外，您可以选择将视区meta标记添加到文档中，这将强制设备报告它的实际尺寸，而不是标称的视区。选择此选项有助于预防由于错误报告的尺寸而引起的意外缩放。注意：对于现在，Media Queries对话框仅读取和写入拥有至少一个min-width和max-width值的查询。此外，该对话框还会编辑这些唯一的min-和max-值。您可以手动编辑其他查询参数，但min-width和max-width是最常用于确定目标设备的值。预设值和站点定义Media Queries对话框还在媒体查询列表区域底部提供了一个预设选项。单击这个Default Presets按钮，Dreamweaver会自动创建：3个分别针对平板电脑、电话和桌面的媒体查询预先填充了常用起始值的codemin-width和max-width。Default Presets按钮提供了一种开始使用媒体查询的快速途径。另一种管理site-wide媒体查询文件的方便方式是使用Site Setup对话框。现在有一个名为Site-wide Media Query File的字段（位于Advanced Settings Local Info中），它指定了您的site-wide媒体查询文件。只要您打开Media Queries对话框，这里列出的文件就会显示为site-wide选项。对于新的（或者甚至现有的）文件，您所需的只是选择该选项来将site-wide媒体查询文件应用到当前页面。注意：更改此文件不会自动更新所有站点文件。Media Queries对话框提供了一种简化媒体查询的创建和管理的不错方式。媒体查询已是使用不同样式确定目标设备的首选方式。从上面可以看到，它们不仅适用于智能电话，还可用于控制任何屏幕的观感。