Vue 3 项目初始化怎么配置移动端自适应适配-Vue.js-PHP中文网

Vue 3移动端自适应需构建“开发友好+运行可靠”基础链：1. 设置viewport元标签；2. 配置postcss-pxtorem实现px转rem；3. 动态设置根字体大小；4. 封装useScreen Hook响应尺寸变化。

vue 3 项目初始化怎么配置移动端自适应适配

Vue 3 项目初始化时配置移动端自适应，关键不是一上来就堆 CSS 媒体查询，而是建立“开发友好 + 运行可靠”的基础适配链：从视口控制、单位转换到屏幕状态感知，三者协同。

1. 设置 viewport 元素（最基础但不可跳过）

在 public/index.html 的中确保有标准 viewport 声明：

这一步让浏览器知道：按设备真实宽度渲染，禁用双击缩放（对表单/按钮体验更可控），是所有后续适配的前提。

2. 选择并配置 px → rem 自动转换（推荐 postcss-pxtorem）

安装插件：

npm install postcss-pxtorem -D

在项目根目录创建 postcss.config.js：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 对应 750px 设计稿（1rem = 37.5px）
      propList: ['*'], // 所有属性都转
      mediaQuery: false, // 不处理 @media 内的 px（避免误转断点值）
      minPixelValue: 2
    }
  }
};

这样你写 width: 150px;，构建时自动变成 width: 4rem;，无需手动算。

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

3. 动态设置根字体大小（让 rem 真正响应设备）

不依赖已淘汰的 lib-flexible，改用轻量脚本（如 src/utils/flexible.js）：

(function (doc) {
  const docEl = doc.documentElement;
  const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  const recalc = () => {
    const width = docEl.clientWidth;
    if (width     if (width > 750) width = 750;
    docEl.style.fontSize = width / 7.5 + 'px'; // 750 / 10 = 75 → 但常用 7.5 得到 100px=1rem 方便换算
  };
  recalc();
  window.addEventListener(resizeEvt, recalc);
})(document);

然后在 main.js 最顶部引入：
import './utils/flexible.js';

4. 封装 useScreen Hook（让业务逻辑响应尺寸变化）

新建 src/composables/useScreen.js：

import { ref, onMounted, onUnmounted, computed } from 'vue';

export function useScreen() {
  const width = ref(window.innerWidth);
  const height = ref(window.innerHeight);

  const isMobile = computed(() => width.value   const isTablet = computed(() => width.value >= 768 && width.value   const breakpoint = computed(() => {
    if (width.value     if (width.value     return 'desktop';
  });

  const handleResize = () => {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  };

  onMounted(() => {
    window.addEventListener('resize', handleResize);
  });
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
  });

  return { width, height, isMobile, isTablet, breakpoint };
}

组件中可直接调用：
const { isMobile, breakpoint } = useScreen();
watch(breakpoint, (val) => { if (val === 'mobile') showMenu.value = false; });