响应式网页设计 | Gulp.js 网站教程

介绍

在这个项目中，你将学习如何为网站实现响应式布局，类似于官方的 Gulp.js 网站。你将使用媒体查询根据屏幕大小调整网页的布局和样式。

👀 预览

🎯 任务

在这个项目中，你将学习：

如何向 HTML 文件添加媒体查询规则以创建响应式布局
如何根据不同屏幕大小调整页面元素的宽度和可见性
如何通过调整浏览器窗口大小来测试响应式布局

🏆 成果

完成这个项目后，你将能够：

使用媒体查询实现响应式网页设计
根据屏幕大小调整布局和样式
针对不同设备和屏幕分辨率有效地测试和优化网页

设置项目

在这一步中，你将设置项目并在编辑器中打开文件。

打开项目文件夹，其中包含以下文件和目录：

├── css
├── imgs
├── js
└── index.html

点击 WebIDE 右下角的Go Live按钮来运行项目。

接下来，在虚拟机顶部打开“Web 8080”并手动刷新以查看页面。

现在你可以看到 Gulp 网站的静态页面，它还没有响应式设计。手动更改窗口大小，你将看到以下效果。

✨ 查看解决方案并练习

添加媒体查询

在这一步中，你将学习如何向 HTML 文件添加媒体查询，以使页面具有响应式设计。

在代码编辑器中打开 index.html 文件。
在文档的 <head> 中找到第一个 <style> 部分。
在 <style> 中的 /* TODO */ 下方添加以下媒体查询规则：

/* TODO */
@media screen and (max-width: 1400px) {
  nav.content,
  main section {
    width: 900px !important;
  }
}

@media screen and (max-width: 900px) {
  nav.content,
  main section {
    width: 700px !important;
  }
}

@media screen and (max-width: 650px) {
  main section,
  main ul li {
    width: 100% !important;
  }

  nav.content.list {
    display: none;
  }

  nav.content.menu {
    display: block;
    position: absolute;
    right: 10px;
  }

  main ul li:nth-child(even) {
    margin-left: 0 !important;
  }
}

这些媒体查询将根据屏幕宽度为页面应用特定的样式。第一个媒体查询在屏幕宽度小于或等于 1400px 时，将导航栏的内容和主要部分的宽度设置为 900px。第二个媒体查询在屏幕宽度小于或等于 900px 时，将宽度设置为 700px。第三个媒体查询在屏幕宽度小于或等于 650px 时，隐藏导航列表，显示菜单图标，并将主要部分和列表项的宽度设置为 100%。

✨ 查看解决方案并练习