习题

一、选择题

1. 如果一个网站在不同的环境下跳转到不同的网址，那么这个网站（　）。

A. 是响应式的

B. 是固定布局的

C. 是自适应的

D. 更新和维护时相对容易

2. <link rel="stylesheet" type="text/css" href="site.css" media="print" />这个语句表示在（　）内容的显示。

A. 屏幕上

B. 移动设备上

C. 打印预览下

D. 触摸设备上

3. 以下条件表示在（　）时背景颜色的显示设置。

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

A. 屏幕的宽度最大不超过300像素

B. 屏幕的宽度小于300像素

C. 屏幕的宽度最少不超过300像素

D. 屏幕的宽度最少为300像素

4. 如果要求对所有媒体类型都适用，可以使用（　）来指代所有支持的媒体类型。

A. not

B. only

C. all

D. but

5. 以下媒体查询条件表示（　）。

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

A. 设备方向为水平时显示指定的背景颜色

B. 设备方向为垂直时显示指定的背景颜色

C. 设备分辨率低时显示指定的背景颜色

D. 设备分辨率高时显示指定的背景颜色

6. 在以下这个语句中的viewport表示屏幕的（　）。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0">

A. 可视区域

B. 总大小

C. 指定元素的大小

D. 指定元素的可见大小

7. 以下语句使用了srcset属性根据屏幕的（　）来匹配显示的图像。

<img srcset ="img/1_1280.jpg 3x,img/1_640.jpg 2x,img/1_320.jpg 1x"/>

A. 宽度

B. 高度

C. 颜色位数

D. 像素密度

8. 根据以下语句，如果当前屏幕尺寸不超过320像素时，将自动匹配（　）这个图像。

<img src="img/img/1_1280.jpg""
srcset ="img/1_1280.jpg 1280w, img/1_640.jpg 640w,img/1_320.jpg 320w"/>

A. 1_1280.jpg

B. 1_640.jpg

C. 1_320.jpg

D. 以上均不能匹配

9. 以下语句表示当屏幕的宽度大于等于1200px时，图像宽度将显示为（　）。

<img src="img/1_1280.jpg" sizes="(min-width:1200px) calc(43vw), 50vw"/>

A. 43px

B. 当前屏幕宽度的43%

C. 当前图像原始宽度的43%

D. 当前图像原始大小的43%

10. 如果在当前的div main中设置了其字体为5em，而当前div又在另一个div的container中。如果container设置了字体大小的为5em，那么假如当前浏览器默认的字体大小是16px，这样在container中的字体大小是（　），而在main中的字体大小就应该是（　）。

A. 16px，16px

B. 16px，80px

C. 80px，80px

D. 80px，400px

二、操作题

使用Adobe Dreamweaver CC实现一个响应式网页。

要求：

1. 设置3个或以上的媒体查询条件。

2. 至少有1个图像实现响应式图像适配。

3. 使用流式布局。