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

简介

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

👀 预览

🎯 任务

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

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

🏆 成果

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css/CoreLayoutGroup -.-> css/display_property("Display Property") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/ResponsiveandAdaptiveDesignGroup -.-> css/media_queries("Media Queries") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("Mobile First Design") subgraph Lab Skills css/display_property -.-> lab-300102{{"使用 Gulp 进行响应式网页设计"}} css/positioning -.-> lab-300102{{"使用 Gulp 进行响应式网页设计"}} css/media_queries -.-> lab-300102{{"使用 Gulp 进行响应式网页设计"}} css/mobile_first_design -.-> lab-300102{{"使用 Gulp 进行响应式网页设计"}} end

设置项目

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

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

├── 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%。

测试响应式布局

在这一步中，你将测试响应式设计并进行必要的优化。

保存 index.html 文件。
在浏览器中刷新网页。
将浏览器窗口调整为不同的宽度，以查看响应式布局的变化。
验证页面布局是否与提供的图像中显示的预期结果相符。

至此，你已完成了Gulp.js网站响应式布局的实现。现在，页面应根据要求适应不同的屏幕尺寸。

完成后的移动端效果如下所示：

恭喜你！你已成功为Gulp.js网站实现了响应式布局。

✨ 查看解决方案并练习

总结

恭喜你！你已完成这个项目。你可以在LabEx中练习更多实验来提升你的技能。