网站移动端与 PC 端如何分离排版｜自适应布局（页面调试教程）

发布时间：2026-07-23 18:19

# 网站移动端与 PC 端如何分离排版｜自适应布局（页面调试教程）

## 前言介绍

在网站开发中，一个常见的需求是：移动端和PC端使用完全不同的页面布局，甚至不同的内容结构。传统的响应式设计（通过CSS媒体查询调整样式）虽然能适配不同屏幕，但有时会显得“削足适履”——比如PC端的大图轮播在手机上加载慢、操作不便，或者移动端的触控按钮在PC上显得多余。这时候，我们需要“分离排版”：让同一套代码根据设备类型，输出不同的HTML结构、CSS样式和JavaScript逻辑。

本教程将手把手教你使用**CSS媒体查询**结合**设备检测**技术，实现真正的移动端与PC端分离排版。你将学会如何调试页面，确保两端显示完美，并解决常见的适配问题。

## 前置准备

在开始之前，请确保你具备以下条件：

1. **一个可编辑的HTML文件**：你可以使用任何文本编辑器（如VS Code、Sublime Text、记事本），创建一个名为`index.html`的文件。

2. **浏览器开发者工具**：推荐使用Chrome或Edge浏览器，按`F12`打开开发者工具，这是调试的核心工具。

3. **基础HTML/CSS知识**：你至少需要知道`

`、`

PC端导航栏

这里是PC端特有的长篇内容，包含多列布局和详细说明。

移动端精简内容，适合单手操作。

```

**关键点说明**：

- 我们创建了两个独立的`

`，分别用`class="pc-layout"`和`class="mobile-layout"`标识。

- 每个容器内部可以完全自定义结构，甚至调用不同的图片资源（如PC端用大图，移动端用小图）。

- 目前两个容器都会显示在页面上，接下来我们需要通过CSS让它们根据屏幕宽度自动切换。

### 步骤2：编写CSS媒体查询，实现显示/隐藏切换

现在，我们要用CSS控制哪个容器显示，哪个隐藏。核心思路是：**默认隐藏移动端容器，当屏幕宽度小于某个阈值（如768px）时，隐藏PC端容器，显示移动端容器**。

在`