三分钟学会 PC 网站的移动端适配——技术选型+项目实战💥 两天完成 PC 项目的移动端改造！全流程实战 + 踩坑详解

💥 两天完成 PC 项目的移动端改造！全流程实战 + 踩坑详解

本文记录了我在短时间内将一个基于 Nuxt、SCSS 和 Tailwind CSS 构建的 PC 网站，快速适配为移动端的全过程。核心目标是在不破坏原有 PC 样式结构的前提下，实现良好的移动端响应体验。

📌 改造背景

原有项目是为 PC 端设计，使用了大量 .scss 编写的自定义样式，并配合全局 common.css 和postcss-px-to-viewport 插件实现页面结构和样式控制。开始时尝试也用 postcss-px-to-viewport 插件做移动端尝试，但存在以下问题：

PC 端样式被强制转为 vw，视觉比例被破坏；
在细节样式调试时很不直观，改一处动全身；
与 Tailwind CSS 的类名和自动化工具链存在冲突。

因此，本次改造决定采用如下策略：

🧩 选型方案

✅ 最终选择：Tailwind CSS 响应式类 + SCSS 媒体查询混合模式

为了保持原有 PC 样式逻辑不变，又能够灵活适配移动端，且方便未来逐步迁移成tailwind，选用：

工具	用途	理由说明
Tailwind CSS	快速编写移动端样式（类名如 `md:hidden`）	结构清晰、响应式强、适合新写逻辑
SCSS 媒体查询	维护已有 PC 样式逻辑、补充局部细节	不改动原有 `.scss` 模块，便于过渡
取消 postcss 插件	去除 `px-to-viewport` 等	防止污染 PC 视觉、提升可控性

🛠️ 一些实战改造细节

1. 判断是否为移动端（统一响应式逻辑）

// store/app.ts
const isMobile = ref(false)

onMounted(() => {
  isMobile.value = window.innerWidth <= 768
  window.addEventListener('resize', () => {
    isMobile.value = window.innerWidth <= 768
  })
})

通过 Pinia 的 storeToRefs 引入后即可在任意组件中使用 v-show="isMobile" 区分双端同功能的不同样式呈现。

2. Header 顶部导航响应式调整

PC 端导航条结构

    <!-- 响应式横向（md:row）切换为纵向（默认col） -->
    <div class="box flex flex-col md:flex-row md:items-center md:justify-center px-4 md:px-0">

移动端菜单按钮（点击展开气泡）

<div v-show="isMobile" class="moreMenuBox">
  <img class="moreButton" @click="toggleMenu" />
  <div v-show="showMenu" class="dropdownMenu">
    <div class="bubble">
      <h4 v-for="item in menuBox" ...>{{ $t(item) }}</h4>
    </div>
  </div>
</div>

注意事项

使用 v-show 而非 v-if，避免频繁销毁重建组件；
.dropdownMenu 默认 display: none，由 showMenu 控制显示；
使用 :hover 实现双端的hover和点击效果
为两端逻辑分别定制样式逻辑，不混写。

3. 弹窗内容布局（PC 横排 / App 竖排）

.info {
  display: flex;
  flex-direction: row;
  align-items: center;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;

    h5 {
      font-size: 12px;
      text-align: left;
    }

    img {
      margin-bottom: 6px;
    }
  }
}

注意： 对于 .info 内图片大小、字体排版都应重新设计，防止出现横向滚动或超出边界问题。

⚠️ 踩坑记录

问题	说明	解决方案
Tailwind 类名覆盖 SCSS	同名类优先级冲突	开发时注意理清楚原有样式和新增样式是否有冲突
`postcss` 移除后页面错乱	原样式依赖 `vw`	全面回滚原样式单位为 `px`，转为手动控制响应式
Tailwind + SCSS 混用调试困难	找不到样式来源	推荐在 DevTools 中右键 -> “跳转到定义” 定位具体样式源

🧾 建议

建议先理清楚 PC 样式，再用 Tailwind 写app端响应式补丁，避免引起pc端样式变化；
重要组件独立用 SCSS 媒体查询维护，不全部依赖 Tailwind；
Tailwind 适合新建页面或拆分新组件，老项目逐步迁移更安全；
响应式断点常见的：
- max-width: 768px → 手机
- max-width: 1024px → 平板

🧠 总结

本次移动端适配的核心思路是：

保留旧有样式逻辑，局部响应式适配，从结构入手，分类拆分，而不是“一刀切”。

通过两天的梳理、调试、抽象逻辑，成功将一个纯 PC 项目快速适配为移动端展示。在不断试错与验证中总结出适合自己团队的混合方案，也为后续更多组件的适配提供范式。

如果你也在从 PC 项目转向响应式开发，希望这份详细实战笔记能帮你少踩坑、快上手！

三分钟学会 PC 网站的移动端适配——技术选型+项目实战