vue实现移动显示
Vue 实现移动端显示适配方案
方案一：使用 Viewport 元标签与 REM 布局
在 public/index.html 中添加 viewport 配置，确保页面缩放比例正确：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">通过 postcss-pxtorem 插件自动转换 px 为 rem：
// postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5, // 设计稿宽度/10（如375px设计稿）
propList: ['*']
}
}
}方案二：VW/VH 视口单位布局 直接在 CSS 中使用视口单位，结合 SCSS 函数简化计算：
// 假设设计稿宽度为375px
@function vw($px) {
@return ($px / 375) * 100vw;
}
.container {
width: vw(375);
padding: vw(15);
}方案三：媒体查询响应式设计 在组件中针对不同屏幕尺寸应用不同样式：
<template>
<div :class="['container', { 'mobile-layout': isMobile }]">
<!-- 内容 -->
</div>
</template>
<script>
export default {
computed: {
isMobile() {
return window.innerWidth <= 768
}
}
}
</script>
<style>
.container {
width: 100%;
}
@media (max-width: 768px) {
.mobile-layout {
padding: 10px;
font-size: 14px;
}
}
</style>方案四：动态根字体大小 在 main.js 中设置根元素字体大小随窗口变化：
// 基于375px设计稿
document.documentElement.style.fontSize = `${window.innerWidth / 3.75}px`
window.addEventListener('resize', () => {
document.documentElement.style.fontSize = `${window.innerWidth / 3.75}px`
})方案五：使用 UI 框架内置适配 如使用 Vant 等移动端 UI 框架时，框架通常自带适配方案：
import { createApp } from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
const app = createApp(App)
app.use(Vant)注意事项
- 触摸事件应使用
@touchstart替代@click提升移动端体验 - 避免使用固定像素值布局，优先使用弹性布局（Flex）或网格布局（Grid）
- 对于高清屏需准备 2x/3x 倍图保证显示清晰度
- 使用
fastclick库解决移动端点击延迟问题
