vue实现手机预览样式
使用视口(viewport)适配移动端
在public/index.html或模板文件中添加meta标签，确保页面按设备宽度缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">使用CSS媒体查询
在样式文件中添加响应式断点：
@media screen and (max-width: 750px) {
.container {
width: 100%;
padding: 0 15px;
}
}使用rem单位布局
结合postcss-pxtorem插件自动转换px为rem：
// vue.config.js
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5,
propList: ['*']
})
]
}
}
}
}动态设置根字体大小
在main.js或组件中添加屏幕适配代码：
document.addEventListener('DOMContentLoaded', () => {
const docEl = document.documentElement
const resize = () => {
const clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = (clientWidth / 10) + 'px'
}
resize()
window.addEventListener('resize', resize)
})使用Vant等移动UI库
安装配置移动端组件库：
npm install vant -S按需引入组件：
import { Button, Cell } from 'vant'
Vue.use(Button).use(Cell)真机调试工具
使用浏览器开发者工具模拟移动设备：
- Chrome DevTools切换设备模式
- 使用
npm run serve启动本地服务 - 手机与电脑同局域网访问IP地址
手势事件处理
添加touch事件支持：
export default {
methods: {
handleSwipe() {
// 实现滑动逻辑
}
},
mounted() {
this.$el.addEventListener('touchstart', this.handleSwipe)
},
beforeDestroy() {
this.$el.removeEventListener('touchstart', this.handleSwipe)
}
}移动端调试方案
安装vConsole进行移动端调试：
npm install vconsole在main.js中初始化：
import VConsole from 'vconsole'
new VConsole()
