个人网站制作 Part 4 添加响应式设计 | Web开发项目

---

‍ 基础Web开发练手项目系列：个人网站制作

欢迎回到基础Web开发练手项目系列！

在前三篇博文中，我们已经创建了个人网站的基本结构、样式、导航栏、项目展示、联系信息、表单交互、动画效果和页面滚动效果。

在本篇中，我们将学习如何添加响应式设计，使你的网站适应不同屏幕大小。

添加响应式设计

移动优先的响应式样式

步骤 1: 添加媒体查询

在 style.css 文件中添加以下媒体查询，以实现移动设备优先的响应式设计：

/* 移动设备样式（默认样式） */
body {
    font-size: 16px;
}

/* 平板设备及以上的样式 */
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

/* 大屏设备样式 */
@media (min-width: 1200px) {
    body {
        font-size: 20px;
    }
}

图片和布局调整

步骤 2: 使用响应式图片

在 index.html 文件中使用 srcset 属性为图片添加响应式支持：

<img src="mobile-image.jpg" alt="移动设备图片" srcset="tablet-image.jpg 768w, desktop-image.jpg 1200w">

步骤 3: 调整布局

在 style.css 文件中调整部分布局，以适应不同屏幕大小：

/* 移动设备样式 */
section {
    margin: 1rem 0;
}

/* 平板设备及以上的样式 */
@media (min-width: 768px) {
    section {
        margin: 2rem 0;
    }
}

/* 大屏设备样式 */
@media (min-width: 1200px) {
    section {
        margin: 3rem 0;
    }
}

预览与保存

确保保存所有文件并在浏览器中预览你的网站。你现在应该看到一个在不同屏幕上都能良好呈现的响应式个人网站了！

下一步计划

在下一篇文章中，我们将学习如何优化网站性能，包括图片压缩、代码优化等。记得继续关注本系列，使你的网站更具竞争力！

通过这个项目，你已经学到了Web开发中许多重要的基础知识。祝你在编码的道路上越走越远，继续取得进步！