技能测试:响应式网页设计和媒体查询

此技能测试的目的是帮助您评估是否理解如何使用媒体查询,并通过一个实际任务让您开始使用响应式网页设计。您需要了解的所有内容都已包含在CSS 布局模块的布局课程中。

注意: 如需帮助,请阅读我们的“技能测试”使用指南。您也可以通过我们的沟通渠道与我们联系。

任务

由于您需要测试设计在多种屏幕尺寸下的表现,因此本页面不提供交互式编辑器。

开始

  1. 下载此任务的起点.
  2. 在浏览器中打开下载的 HTML 文件,您将看到一个线框图网站,它将在移动设备上以可读的方式加载。
  3. 缩小您的窗口或使用 Firefox DevTools 中的响应式设计模式,将其视为在手机上查看。

您的任务是创建一个桌面版本的布局,该布局将在屏幕宽度足够容纳时显示。您的最终结果应该如下面的图像所示

A two column wireframed layout.

您可以通过多种方式创建桌面布局 — 尽情尝试。您也可以添加第二个断点,例如创建一个适合平板电脑纵屏模式的布局。