在当今移动互联网时代，用户通过手机、平板、笔记本电脑等多种设备访问网站已成为常态。一个网站如果只能在电脑大屏幕上 显示，而在手机上布局错乱、文字过小、操作困难，将直接导致用户流失。响应式网站设计应运而生，它能让你的网站自动适应不同屏幕尺寸，提供一致且友好的浏览体验。对于许多初学者或中小型项目而言，制作响应式网站听起来技术门槛很高，但其实只要掌握核心原理和步骤，你完全可以亲手搭建。本文将以清晰、简洁的教程风格，分步讲解从零开始制作一个基础响应式网站的完整流程，让你一看就懂，照着就能做。

第一步：规划与准备——奠定坚实的基础

在开始写代码之前，充分的规划能让后续工作事半功倍。

1.1 明确网站目标与内容结构

想清楚你的网站要用来做什么？是展示个人作品、经营小型网店，还是发布博客？明确目标后，用纸笔或思维导图工具画出网站的内容结构图，列出所有需要的页面（如首页、关于、产品、联系）以及每个页面上的核心模块（如导航栏、横幅图、内容区、页脚）。

1.2 设计线框图

线框图是网站的“骨架”，它不关注视觉细节（颜色、图片），只关注布局和内容区块的排布。建议分别为桌面端（宽屏） 和移动端（窄屏） 绘制简单的线框图。思考在宽屏上如何并排展示内容，在窄屏上这些内容又如何上下排列。这一步是响应式思维的关键。

1.3 准备开发环境与工具

你只需要三样东西：

文本编辑器：如VS Code、Sublime Text，它们能高亮显示代码，提高编写效率。

现代浏览器：如Chrome、Firefox，它们内置了雄厚的开启者工具，可以实时调试和模拟不同设备屏幕。

本地文件夹：在电脑上新建一个项目文件夹，例如“my-responsive-site”，并在其中创建三个空文件：`index.html`、`style.css`、`script.js`。

第二步：编写HTML结构——搭建内容的骨架

HTML负责定义网页的内容和结构。我们从一个 简单的页面开始。

2.1 创建基础HTML文档

打开`index.html`文件，输入以下基础代码结构：

```html

主要内容区 -->

```

关键点说明：

`` 这一行是响应式设计的基础。它告诉浏览器，网页的宽度应该等于设备的屏幕宽度，并且初始缩放比例为1（不缩放）。没有它，移动端浏览器可能会以桌面端宽度渲染页面，导致需要手动缩放。

我们使用了 `

`, `