如今，超过一半的互联网流量来自移动设备。用户习惯在通勤路上、休息间隙，通过手机浏览新闻、购物或学习。如果一个网页在电脑上看起来精美，但在手机上却需要不断缩放、拖动才能阅读，那么绝大多数用户会毫不犹豫地离开。制作“移动友好”或“响应式”的网页，不再是加分项，而是基本要求。本教程将避开复杂的理论，专注于实用的步骤和代码，让你即使没有深厚的技术背景，也能跟随着创建一个适配手机屏幕的简易网页。

一、准备工作——理念与工具

在开始写代码之前，明确两个核心理念至关重要：

1. 移动优先：这意味着我们在设计时，首先考虑手机小屏幕上的布局和体验，然后再考虑如何扩展到更大的平板或电脑屏幕。这种思路能确保核心内容在移动设备上得到理想呈现。

2. 响应式设计：指网页能够自动检测访问设备的屏幕宽度，并灵活调整布局、图片大小和文字排版，以提供理想的浏览体验。

你需要的工具非常简单：

一台电脑：Windows、Mac或Linux系统均可。

一个文本编辑器：例如系统自带的记事本（Notepad）或更推荐的免费编辑器如VS Code、Sublime Text。它们能高亮显示代码，让编写更轻松。

一个网页浏览器：推荐使用Chrome或Firefox，它们内置了雄厚的开启者工具，可以方便地模拟手机屏幕进行调试。

二、从骨架开始——HTML结构

HTML是网页的骨架，定义了内容的结构。我们创建一个蕞简单的手机网页结构。

1. 在你的电脑上新建一个文件夹，命名为“my-mobile-site”。

2. 在这个文件夹里，新建一个文本文件，将其重命名为 `index.html`（注意扩展名是.html）。

3. 用文本编辑器打开这个文件，输入以下基础代码：

```html

```

代码解释：

``：这行代码告诉浏览器，网页的宽度应该等于设备的屏幕宽度，并且初始缩放级别为1.0。这是实现响应式布局的基础。