1.3 媒体查询实现响应式布局

1.3.1 媒体查询基础

CSS3中的媒体查询是响应式网页设计的主要核心技术之一，简单地说就是让不同的浏览设备去运用符合该设备浏览尺寸的CSS内容，所运用的尺寸称为“断点”，断点的设置主要针对手机、平板计算机、计算机3种浏览设备。断点设置方案主要依据一些固定的宽度进行划分，例如480px适合手机，768px适合iPad，1024px适合中等屏幕及传统计算机浏览器，1200px适合大桌面显示器及计算机浏览器，如图1-3所示。这种方案可以让当前的主流设备完美地显示网页。

断点规划的最佳做法是先从较小的设备开始选择主要断点，之后再处理较大的设备；先设计符合小屏幕的内容，接着将屏幕放大，等到画面开始走样的时候再设置断点。另外，还可以采用此法根据内容将断点优化，只需要保留最少的断点即可。

【实例1-1】 媒体查询实例，代码如下。

本实例通过媒体查询判断屏幕的宽度，使页面自适应调整背景颜色，当小于479px时为绿色（green）；当宽度为480～767px时为黄色（yellow）；当宽度为768～1023px时为蓝色（blue）；当宽度为1024～1199px时为红色（red）；当宽度在1200px以上时为橙色（orange）。

1.3.2 使用方法

媒体查询的使用方式有如下两种。

1）在CSS文件中，@media用来判断用户设备的屏幕宽度，以确定选择加载哪一段CSS。

例如如下代码。

这段代码说明当屏幕宽度小于768px时，body运行“background-color: red;”，也就是页面背景为红色；当超出768px后，页面背景为默认的白色。

2）在HTML文件中，media属性用判断用户设备的屏幕宽度，以确定选择加载哪一个CSS文件。

例如：

这段代码说明当屏幕宽度小于768px时，运行“style1.css”样式文件。

1.3.3 设置方式

媒体查询的设置方式如下。

本示例语句分为媒体类别（mediatype）、判断条件（and | not | only）、媒体特性（media feature）3部分。

例如：

这段代码说明，当屏幕宽度在1024px以上时，背景颜色为红色；当屏幕宽度在768px以上时，背景为蓝色；当屏幕宽度在480px以上时，背景为绿色；当屏幕宽度小于480px时，背景为默认白色。

1.3.4 媒体类型

媒体类型用来指定运用的对象，响应式网页一般都是根据屏幕大小来调整版式，因此设置为“screen”。常用媒体类型及说明如表1-2所示。

1.3.5 判断条件

媒体查询语句中可加入“and”“not”“only”关键词进行相关的条件判断。

1．and的使用方法

（1）单一条件成立

例如：

这段代码表示当屏幕宽度为480px以上时，网页背景颜色为绿色（green）。

（2）同时符合两种条件

例如：

这段代码表示当屏幕宽度在768～1023px间时，网页背景颜色为蓝色（blue）。

（3）两种条件符合其一

例如：

这段代码表示当屏幕为彩色屏幕或彩色投影仪时，页面中的字体为2em。

2．not的使用方法

not用来排除某些设备的样式，假设希望这个样式只在A设备起作用，而在B设备完全不起作用，就可以使用not。

例如：

这段代码表示彩色屏幕页面中的字体为2em，而打印机不会使用这个样式。

3．only的使用方法

only用来指定某种特定的媒体类型，很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备指定媒体类型。

例如：

这段代码表示“只有”当屏幕宽度在768～1023px间时，网页背景颜色为蓝色（blue）。

1.3.6 媒体特征

媒体特征是媒体查询中的条件类型可以设置的属性，如表1-3所示。