HTML5手机网站制作教程从哪开始学？-建站教程-锦华智联科技

HTML5 手机网站制作完整教程

第一部分：核心概念 - 什么是手机网站？

在开始写代码之前,我们必须先明白几个关键概念。

（图片来源网络，侵删）

响应式网页设计

这是制作手机网站的核心技术,它的核心理念是：“一次设计，多端适配”。

传统做法：为手机网站创建一个独立的域名（如 m.example.com），这需要维护两套代码，成本高且内容同步困难。
响应式设计：只用一个网站代码，通过 CSS 样式来控制页面在不同尺寸设备（手机、平板、桌面电脑）上的显示布局。

视口

视口是浏览器显示网页内容的屏幕区域,在手机上，如果不对视口进行设置，浏览器会默认以桌面版的宽度（通常是 980px）来渲染页面，然后将其缩小以适应屏幕，导致用户需要手动放大才能看清内容。

（图片来源网络，侵删）

我们必须在 HTML 的 <head> 部分添加一个 <meta> 标签来告诉浏览器如何处理视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width：告诉浏览器，页面的宽度应该等于设备的屏幕宽度。
initial-scale=1.0：告诉浏览器，初始的缩放比例应为 100%。

媒体查询

媒体查询是实现响应式设计的“魔法棒”，它允许你根据设备的特定特征（如屏幕宽度、高度、方向等）来应用不同的 CSS 样式。

最常用的媒体查询是根据屏幕宽度来改变布局,当屏幕宽度小于或等于 768px 时，我们认为这是一台平板或手机，此时可以改变导航栏的样式。

（图片来源网络，侵删）

第二部分：开发环境准备

你不需要任何复杂的软件,一个简单的文本编辑器就足够了。

文本编辑器：
- VS Code (强烈推荐)：免费、强大，有丰富的插件支持（如 Live Server，可以实时预览）。
- Sublime Text：轻量、快速。
- Notepad++ (Windows) 或 TextEdit (Mac)：系统自带，功能简单。
现代浏览器：
- Chrome 或 Firefox：它们都内置了强大的“开发者工具”，可以模拟不同设备，方便调试。
创建项目文件夹：在你的电脑上创建一个文件夹，my-mobile-site，在里面创建三个文件：
- index.html (网页结构)
- style.css (网页样式)
- script.js (网页交互，可选)

第三部分：实战步骤 - 从零开始构建一个手机网站

我们将创建一个简单的个人作品集网站。

步骤 1：设置 HTML5 基础结构

打开 index.html 文件，输入以下基础代码，注意 <head> 中的视口标签。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的手机网站</title>
    <!-- 引入我们的CSS文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>我的作品集</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我</a></li>
                <li><a href="#portfolio">作品</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>欢迎来到我的网站</h2>
            <p>这是一个使用 HTML5 和 CSS 制作的响应式网站示例。</p>
        </section>
        <section id="about">
            <h2>关于我</h2>
            <p>我是一名前端开发者，热爱创造美观且实用的网页。</p>
        </section>
        <section id="portfolio">
            <h2>我的作品</h2>
            <p>这里将展示我的项目...</p>
        </section>
        <section id="contact">
            <h2>联系我</h2>
            <p>邮箱：example@email.com</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 我的作品集</p>
    </footer>
    <!-- 引入我们的JS文件 (可选) -->
    <script src="script.js"></script>
</body>
</html>

步骤 2：编写基础 CSS 样式

打开 style.css 文件，我们先为桌面端写一些基础样式。

/* 全局样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}
/* 头部样式 */
header {
    background: #333;
    color: #fff;
    padding: 1rem;
    text-align: center;
}
/* 导航栏样式 - 桌面端 */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
}
nav ul li {
    margin: 0 15px;
}
nav a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
区域 */
main section {
    background: #fff;
    padding: 2rem;
    margin: 1rem;
    border-radius: 5px;
}
/* 页脚 */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem;
    position: fixed; /* 固定在底部 */
    bottom: 0;
    width: 100%;
}

在浏览器中打开 index.html，你应该能看到一个布局整齐的桌面版网站。

步骤 3：添加媒体查询，实现手机端适配

这是最关键的一步,我们在 style.css 文件的末尾添加媒体查询代码，告诉浏览器：“当屏幕宽度小于等于 768px 时，请应用以下样式”。

/* 在 style.css 文件末尾添加 */
/* 手机端样式 - 当屏幕宽度小于等于 768px 时生效 */
@media (max-width: 768px) {
    /* 导航栏样式 - 手机端 */
    nav ul {
        /* 改为垂直排列 */
        flex-direction: column;
    }
    nav ul li {
        /* 去掉水平间距，增加垂直间距 */
        margin: 5px 0;
    }
    /* 主要内容区域 - 手机端 */
    main section {
        /* 减少内边距，适应小屏幕 */
        padding: 1rem;
        margin: 0.5rem;
    }
    /* 页脚 - 手机端 */
    footer {
        position: static; /* 取消固定定位，让它正常流 */
    }
}

效果：尝试调整浏览器窗口的宽度，当窗口宽度变窄到一定程度时，导航栏会从水平排列变成垂直排列，内容区域的内边距也会相应减小，这就是响应式设计的魅力！

第四部分：提升用户体验的手机端技巧

使用更友好的字体

为了在手机上获得更好的阅读体验,可以使用 -apple-system 等系统字体栈，它们能更好地匹配不同操作系统的默认字体。

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

优化图片和媒体

使用 srcset 属性：为不同分辨率的设备提供不同尺寸的图片，减少加载时间。

<img src="image-small.jpg" 
     srcset="image-large.jpg 1024w, image-medium.jpg 640w, image-small.jpg 320w" 
     sizes="(max-width: 768px) 100vw, 50vw" 
     alt="描述性文字">

使用 picture 元素：根据屏幕方向或特性提供不同的图片格式（如 WebP）或内容。

<picture>
    <source media="(min-width: 768px)" srcset="desktop-image.jpg">
    <source media="(max-width: 767px)" srcset="mobile-image.jpg">
    <img src="fallback-image.jpg" alt="描述性文字">
</picture>

优化表单输入

为输入框添加 inputmode 属性，可以在移动设备上弹出更合适的键盘。

<!-- 电话输入，弹出数字键盘 -->
<input type="tel" inputmode="numeric">
<!-- 邮箱输入，弹出 @ 键盘 -->
<input type="email" inputmode="email">
<!-- 搜索输入 -->
<input type="search" inputmode="search">

防止文本自动缩放

在 iOS Safari 上，如果输入框获得焦点，页面会自动放大，可以通过以下 CSS 防止：

input, textarea, select {
    font-size: 16px; /* 确保字体大小不小于 16px */
}

第五部分：测试与发布

测试

浏览器开发者工具：在 Chrome 或 Firefox 中按 F12 打开开发者工具，点击左上角的手机图标，可以模拟各种设备进行测试。
真机测试：这是最真实的测试。
- 方法一（推荐）：如果你的电脑和手机在同一个 Wi-Fi 下，可以使用 Live Server (VS Code 插件) 来启动一个本地服务器，然后在手机浏览器中输入电脑的局域网 IP 地址来访问。
- 方法二：使用微信开发者工具的“远程调试”功能，可以直接在电脑上调试微信内置浏览器里的页面。

发布

将你的 my-mobile-site 文件夹（里面的 index.html, style.css, script.js 等）通过 FTP 工具上传到你的网站服务器上即可。

第六部分：进阶与资源

当你掌握了基础后,可以学习以下技术来构建更复杂的手机网站：

CSS 框架：Bootstrap 或 Tailwind CSS，它们提供了大量预定义的响应式组件和工具类，能极大加快开发速度。
JavaScript 框架：Vue.js 或 React，用于构建单页应用，提供更流畅的用户体验。
PWA (Progressive Web App)：让你的网站拥有类似原生 App 的体验（如可安装到桌面、离线使用、推送通知等）。
CSS 预处理器：Sass 或 Less，它们为 CSS 增加了变量、嵌套、混合等强大功能，让 CSS 更易于维护。

推荐学习资源：

MDN Web Docs：https://developer.mozilla.org/zh-CN/ (Web 技术的百科全书，非常权威)
W3Schools：https://www.w3schools.com/ (简单易懂的教程和实例)
freeCodeCamp：https://www.freecodecamp.org/chinese/ (免费的编程学习平台，有中文)

祝你开发顺利！