响应式网页设计 | 自适应布局 | 移动友好

介绍

在这个项目中，你将学习如何创建一个响应式网页设计，使其能够适应不同的屏幕尺寸。目标是开发一个能为桌面用户和移动用户都提供舒适用户体验的网页。

👀 预览

响应式设计预览

🎯 任务

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

如何为菜单和内容部分设置初始布局
如何使用媒体查询实现响应式设计
如何测试和优化响应式设计以确保无缝体验

🏆 成果

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

创建一个适应不同屏幕尺寸的响应式网页设计
开发一个用户友好的移动界面，包括一个可折叠菜单
应用测试和迭代响应式网页设计的最佳实践

设置项目

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

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

├── css
│   └── style.css
├── images
│   ├── 1.png
│   └── 2.png
├─── js
│    └── jQuery.min.js
└─── index.html

其中：

index.html 是主页。
css/style.css 是需要补充样式的文件。
js/jQuery.min.js 是 jQuery 库文件。
images 是图像文件夹。

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

接下来，打开虚拟机顶部的“Web 8080”并手动刷新页面，以便在浏览器中看到以下效果：

初始效果

实现响应式设计

在这一步中，你将学习如何为网页实现响应式设计。

将以下 CSS 规则添加到 css/style.css 文件的底部：

@media (max-width: 800px) {
  .menu {
    height: 54px;
    line-height: 54px;
    margin-bottom: 25px;
  }

  .icon-menu {
    color: #a0a0a0;
    margin-left: 20px;
    display: inline-block !important;
  }

  .icon-menu:hover {
    color: white;
    cursor: pointer;
  }

  .collapse {
    display: none;
  }

  input[type="checkbox"]:checked ~ .collapse {
    display: flex;
    flex-direction: column;
    background-color: #252525;
  }

  .dropdown:hover ul {
    display: flex;
    flex-direction: column;
  }

  .row {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
  }

  .box {
    margin-bottom: 15px;
  }

  #tutorials img {
    margin: 0;
  }
}

这段 CSS 代码为网页设置了响应式设计。它包括了移动端布局的样式，如菜单按钮、展开的菜单和内容布局。

主要的变化有：

菜单的高度和行高设置为 54 像素，以匹配移动端设计。
菜单按钮（.icon-menu）被显示并设置样式。
.collapse 类用于默认隐藏菜单项，并在点击菜单按钮时显示。
.row 和 .box 的样式被更新，以便在移动端以单列布局显示内容。
移除了 #tutorials img 的边距，以适应移动端布局。

保存 css/style.css 文件并刷新网页。现在，你应该能看到响应式设计生效，当屏幕宽度小于 800 像素时，会显示移动端布局。

测试并完善响应式设计

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

在浏览器中打开网页，将窗口调整为不同的宽度，以确保布局能正确调整。
在移动端布局上测试菜单按钮功能，确保点击按钮时菜单项能显示出来。
在桌面端和移动端视图上检查内容布局，确保图像、文本和间距看起来不错。
如果你发现任何问题或有改进的地方，在 css/style.css 文件中更新 CSS 并刷新页面以查看更改。

请记住，响应式网页设计是一个反复迭代的过程，所以不要害怕进行试验和优化设计，直到你对结果满意为止。

最终的移动端效果如下所示：

完成效果

总结

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

适用于所有屏幕的响应式网页设计

介绍