Vue 3移动端自适应需构建“开发友好+运行可靠”基础链：1. 设置viewport元标签；2. 配置postcss-pxtorem实现px转rem；3. 动态设置根字体大小；4. 封装useScreen Hook响应尺寸变化。
Vue 3 项目初始化时配置移动端自适应，关键不是一上来就堆 CSS 媒体查询，而是建立“开发友好 + 运行可靠”的基础适配链：从视口控制、单位转换到屏幕状态感知，三者协同。
1. 设置 viewport 元素（最基础但不可跳过）
在 public/index.html 的 中确保有标准 viewport 声明：
这一步让浏览器知道：按设备真实宽度渲染，禁用双击缩放（对表单/按钮体验更可控），是所有后续适配的前提。
2. 选择并配置 px → rem 自动转换（推荐 postcss-pxtorem）
安装插件：
立即学习“前端免费学习笔记（深入）”；
npm install postcss-pxtorem -D在项目根目录创建 postcss.config.js：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
plugins: {
'postcss-pxtorem': {
rootValue: 37.5, // 对应 750px 设计稿（1rem = 37.5px）
propList: ['*'], // 所有属性都转
mediaQuery: false, // 不处理 @media 内的 px（避免误转断点值）
minPixelValue: 2
}
}
};
这样你写 width: 150px;，构建时自动变成 width: 4rem;，无需手动算。
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; });
