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

本次技能测试旨在评估您是否理解如何使用媒体查询,并通过实际任务让您开始使用响应式网页设计。完成此任务所需的所有知识都包含在CSS 布局模块中的布局课程中。

注意:由于您需要在多个屏幕尺寸下测试您的设计,因此此页面上没有交互式编辑器。请下载代码并在本地工作,或使用在线编辑器,例如CodePenJSFiddleGlitch

如果您遇到困难,可以通过我们的沟通渠道之一与我们联系。

任务

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

您的任务是创建此布局的桌面版本,当屏幕宽度足够时显示。最终结果应如下面的图像所示

A two column wireframed layout.

您可以通过多种方式创建桌面布局,尽情尝试。您还可以添加第二个断点,例如创建在平板电脑纵向模式下效果良好的布局。