一套代码如何同时适配移动端和pc端

css3

笔记

发布: 2023-02-10

字数: 1k

阅读时长: 4 分

1. 媒体查询（Media Query）+ CSS Flex/Grid（适用于简单布局）

利用 CSS 的 @media 进行响应式设计，使页面在不同设备上适配。例如：


/* 默认 PC 端样式 */
.container {
  width: 1200px;
  margin: 0 auto;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 16px;
  }
}

适用于：
✅ 结构简单、仅靠 CSS 即可完成适配的项目。
❌ 需要手动写多个 @media 规则，维护成本较高。

2. rem / vw+vh 适配（适用于移动端为主的场景）

rem 方案：根据 html 的 font-size 变化来调整页面比例。常与 postcss-pxtorem 配合使用。
vw / vh 方案：使用视口单位 vw（相对于视口宽度的 1%）进行布局。

示例（rem 方案）：


html {
  font-size: calc(100vw / 375 * 16); /* 以 375px 设计稿为基准 */
}
.container {
  width: 20rem; /* 根据设计稿换算成 rem */
}

适用于：
✅ 主要针对移动端，兼容 PC。
❌ 适配 PC 时可能会遇到一些尺寸问题。

3. 使用 useMediaQuery 监听设备类型（更灵活的方式）

可以用 Vue3 的 ref 或 computed 结合 window.matchMedia 来监听屏幕尺寸，动态切换组件或布局：


import { ref, onMounted, onUnmounted } from "vue";

export function useDeviceType() {
  const isMobile = ref(window.matchMedia("(max-width: 768px)").matches);

  const updateDeviceType = () => {
    isMobile.value = window.matchMedia("(max-width: 768px)").matches;
  };

  onMounted(() => {
    window.addEventListener("resize", updateDeviceType);
  });

  onUnmounted(() => {
    window.removeEventListener("resize", updateDeviceType);
  });

  return { isMobile };
}

在组件中使用：


<script setup>
  import { useDeviceType } from "@/hooks/useDeviceType";

  const { isMobile } = useDeviceType();
</script>

<template>
  <div v-if="isMobile">移动端界面</div>
  <div v-else>PC 端界面</div>
</template>

适用于：
✅ 适配不同设备时可以动态渲染不同组件，减少无效的 DOM。
❌ 需要写额外的逻辑，稍微增加代码复杂度。

4. 基于 vite-plugin-style-import 按需加载不同端的样式

如果 UI 组件库支持不同端（如 Vant 针对移动端，Ant Design Vue 针对 PC 端），可以按需加载：


import styleImport from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style/index`,
        },
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: (name) => `ant-design-vue/es/${name}/style/index`,
        },
      ],
    }),
  ],
});

适用于：
✅ 需要在 PC 端和移动端使用不同 UI 组件库的情况。
❌ 不能解决布局适配问题。

5. 自动适配的 lib-flexible + postcss-pxtorem

如果项目主要是移动端，同时希望在 PC 端也适配，可以用 lib-flexible + postcss-pxtorem 来自动转换 px：

安装：


npm install amfe-flexible postcss-pxtorem --save

在 main.ts 引入：


import 'amfe-flexible'

在 postcss.config.js 配置：


module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 37.5, // 设计稿是 375px
      propList: ["*"], // 需要转换的属性
    },
  },
};

适用于：
✅ 主要是移动端项目，同时希望 PC 端也能展示。
❌ 依赖 amfe-flexible，部分 UI 组件库可能不兼容。

6. Vue3 + Tailwind CSS（推荐）

如果不想写一堆 @media，可以用 Tailwind CSS 的 sm、md、lg 进行适配：


<template>
  <div class="w-full p-4 text-center sm:bg-blue-200 md:bg-green-200 lg:bg-red-200">
    <p class="text-sm md:text-lg lg:text-2xl">不同屏幕尺寸显示不同颜色</p>
  </div>
</template>

适用于：
✅ 开箱即用，开发速度快。
❌ 需要学习 Tailwind 语法。

7. 使用 VueUse 的 useWindowSize 进行监听

VueUse 提供了 useWindowSize 来动态适配：


import { useWindowSize } from '@vueuse/core';

const { width } = useWindowSize();
const isMobile = computed(() => width.value < 768);

适用于：
✅ 需要动态判断设备类型的场景。
❌ 需要引入 VueUse 依赖。

8. 双端组件（PC / Mobile 组件分开管理）

可以维护两个独立的组件，在 App.vue 里按条件渲染：


<template>
  <MobileLayout v-if="isMobile" />
  <PCLayout v-else />
</template>

适用于：
✅ 适配复杂项目，PC 和移动端 UI 差异较大时。
❌ 代码量增加，维护成本高。

总结

方案	适用场景	维护成本	适配能力
Media Query	适用于简单布局	低	⭐⭐⭐
rem/vw 适配	主要移动端	中	⭐⭐⭐⭐
useMediaQuery 监听	组件级适配	中	⭐⭐⭐⭐
vite-plugin-style-import	UI 组件按需加载	低	⭐⭐⭐
lib-flexible + pxtorem	H5 项目	中	⭐⭐⭐⭐
Tailwind CSS	快速开发	低	⭐⭐⭐⭐
useWindowSize 监听	动态调整	中	⭐⭐⭐⭐
双端组件	复杂项目	高	⭐⭐⭐⭐⭐