响应式网页开发基础教程（jQuery+Bootstrap）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.2 媒体查询及应用

1.2.1 媒体查询简介

媒体查询（Media Query）是CSS 3中获取用户行为和设备环境（比如屏幕宽度、屏幕分辨率、设备方向等）并适配相应的CSS规则的过程。媒体查询让CSS能更精确地作用于不同的媒体类型和同一媒体的不同条件，也可以为一些特定的输出设备定制特定的显示效果，从而为不同终端的用户都能提供较好的浏览体验。

媒体查询的定义要使用@media关键字所定义的规则。表1-1是@media规则对主流浏览器的支持。表格中的数字表示支持这个版本号及以上的浏览器版本，比如说对于IE浏览器，媒体查询支持IE 9.0及以上的版本。在测试响应式网页时，最好使用表中所示的这些版本号或以上的浏览器。

表1-1　媒体查询对浏览器的支持

1.2.2 媒体查询的基本形式

其实在CSS2中，就已经可以根据媒体类型获得不同的CSS支持。比如类似这样的HTML代码：

<link rel="stylesheet" type="text/css" href="site.css" media="screen" … />
<link rel="stylesheet" type="text/css" href="print.css" media="print" … />

这些语句在HTML标签中通过media属性来设置在不同视图下所调用的CSS样式表，比如screen表示计算机屏幕，而print则表示打印预览模式下内容的显示。所以这里的第1个link语句表示在计算机屏幕显示的样式设置，而第2个link语句则表示在打印模式下的样式设置。

在CSS 3中，媒体查询的功能更加强大，不仅可以定义不同模式下的样式显示，还可以扩展媒体类型的函数，并允许在样式表中使用更加精确的显示规则，这样就能够更灵活地对特定的设计场景使用自定义的显示规则。

媒体查询还可以在样式表文件或页面的<style type="text/css">…</style>标签内定义。以下是CSS 3中媒体查询定义语句的基本格式：

@media (适用条件1) and/or (适用条件2)…{适用的CSS 样式}

媒体查询的定义首先用media关键字定义媒体查询，接着指定媒体查询的适用条件，这些条件可以是一个或多个特定条件设置的表达式，比如最小的屏幕宽度、最大屏幕宽度等，多个条件之间可以使用and或or来进行连接，最后是定义在满足指定条件下CSS样式的设置。

比如【例1-1】的媒体查询语句，就指定了在屏幕的宽度最大不超过300像素时，页面的背景颜色的显示将会变成指定的亮蓝色。

【例1-1】

@media screen and (max-width: 300px) {
        body {
             background-color:lightblue;
            }
}

媒体查询条件可以是多个。比如【例1-2】中的媒体查询语句就指定了多个限制条件，表示在屏幕的宽度在介于960像素和1200像素之间时，页面背景颜色的显示将会变成指定的黄色。

【例1-2】

@media screen and (min-width:960px) and (max-width:1200px){
   body{
         background:yellow;
         }
}

也可以使用类似CSS 2的形式进行媒体查询定义，不过适配的条件可以更精确。基本的格式：

link media="(适用条件1) " type="text/css" rel="stylesheet" … <

如以下代码表示在屏幕宽度不超过768像素时适配的样式：

<link media="only screen and (max-width: 768px)" type="text/css" rel="stylesheet" … >

媒体查询定义的@media后面支持多种媒体类型。CSS 3中提供了多种的媒体介质类型，常用的有屏幕screen和打印机样式print等，还有一些特殊设备，比如语音朗诵设备speech等。一个平台只有一种介质类型。表1-2是媒体类型的所支持的值的列表，可以看到有一些类型已经不适用了，现在使用的只有all、print、screen、speech这几种。

表1-2　媒体查询支持的媒体类型

如果指定对所有媒体类型都适用，可使用all指代所有支持的媒体类型，类似以下语句这样：

@ media all …

而如果要指定适用于多种设备，可以用关键字and来连接，比如类似以下的语句的定义表示同时适用于两种设备：

@media screen and speech …

还可以使用关键字only来表示只适用于某种设备，以及使用关键字not来排除某种特定设备。比如类似以下这种我们常见的这种写法，就表示样式定义只适用于屏幕：

@media only screen…

1.2.3 常用媒体特性

媒体查询可用于检测的媒体特性包括屏幕宽度、屏幕方向等，常用的特性如表1-3所示。

表1-3　常用媒体特性

媒体特性max-width是指当显示尺寸小于或等于指定的宽度时，所匹配的样式。例如，【例1-3】中的媒体查询表示只适用于屏幕的规则，如果浏览器窗口不超过500像素（即小于或等于500像素），背景将显示为浅蓝色。

【例1-3】

@media only screen and (max-width: 500px) {
    body {
          background-color: lightblue;
    }
}

而min-width则指的是显示尺寸大于或等于指定宽度时，所匹配的样式。如【例1-4】定义的媒体查询表示如果浏览器窗口不小于900像素（即大于或等于900像素），容器.wrapper的宽度为980像素。

【例1-4】

@media screen and (min-width:900px){
   .wrapper{width: 980px;
   }
}

在智能设备上，还可以根据设备的屏幕尺寸来设置相应的样式，比如min-device-width或者max-device-width。比如以下代码表示如果设备的最大显示宽度为480像素时匹配的样式，其中max-device-width指的就是设备当前的分辨率。

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

【例1-5】的媒体查询则定义了如果屏幕显示的方向是垂直的（orientation: portrait），背景将显示为浅蓝色。

【例1-5】

@media only screen and (orientation: portrait) {
    body {
          background-color: lightblue;
    }
}

如果要指定的媒体查询的特性有多个，也可使用and连接多个查询条件，比如【例1-6】的媒体查询表示如果屏幕的宽度在最小的320像素到最大的720像素之间时，网页的背景颜色将为红色。

【例1-6】

@media screen and (max-width:720px) and (min-width:320px){
      body{
       background-color:red;
       }

1.2.4 动手练习：制作响应式网页示例

在本节我们将使用Adobe Dreamweaver CC来开发响应式网页。Adobe Dreamweaver CC是Adobe公司发布的新一代网页制作及编辑软件，相比以前的版本，它集成了Bootstrap等响应式框架，能帮助用户更高效地开发移动优先、快速响应的网站。同时，还可以更便捷地利用媒体查询功能查看针对各种断点的设计，从而进一步完善网页的结构。另外Adobe Dreamweaver CC还支持实时视图下jQuery UI元素的查看，以及通过新增的DOM面板，可以更准确地插入、复制、粘贴、移动或删除页面元素。

下面我们开始使用Adobe Dreamweaver CC来建立第一个响应式网页，并对Adobe Dreamweaver CC的开发环境做一个初步的了解和认识。需要注意的是，Adobe Dreamweaver CC只支持Windows 7及以上的系统，不能在Windows XP环境下使用。另外，测试响应式网页的浏览器也最好使用较新的版本，比如IE 9.0以上，因为低版本的浏览器可能不支持响应式网页技术。

我们在Dreamweaver创建一个新的空白页面。在页面的<body>标签中添加一个id为test的div。代码如下所示：

<body>
<div id="test">
</div>
</body>

把以下媒体查询的相关语句添加到<head>标签内：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
/ *该div的默认属性设置* /
#test{
        background: silver;
             width: 400px;
             height: 200px;
             margin: auto;
        }
/ *媒体查询设置。当屏幕达到600px及以上时div的样式设置* /
@media screen and (min-width:600px){
#test{
             background:#EBEA89;
        }
}
</style>

可以通过Dreamweaver中的实时视图查看页面显示效果。手动拖动Dreamweaver的实时视图的右侧边界，修改实时视图大小，可以看到当实时视图宽度小于600像素时，这个test的div显示为默认的灰色背景颜色；而当实时视图宽度大于600像素时，这个test的div显示为一种类似淡黄的背景颜色。

也可以在浏览器中浏览、测试这个页面。现在有一些浏览器提供了响应式网页的测试工具。比如Google Chrome浏览器，在工具栏或使用组合键【Ctrl+Shift+I】打开“开发者工具”视图，单击“开发者工具”菜单栏中的“Toggle device toolbar”图标（见图1-2），即可打开模拟移动设备的调试工具。

图1-2　打开Toggle device toolbar

在模拟移动设备查看页面的上方有一些显示设置的参数，可以修改模拟的设备类型、切换设备屏幕方向（Rotate键）、设置网络状态等参数，比如可以把当前模拟的设备类型切换为iPhone、iPhone 6等，如图1-3所示。可以试试在这些设备上打开刚才的网页，查看显示效果。如需调试其他不在列表中的模拟设备类型，可通过图1-3菜单中的“Edit…”来添加。

图1-3　设置模拟设备及参数

上一章目录下一章