vue实现移动和pc
Vue 实现移动端和 PC 端适配方案
响应式布局
使用 CSS 媒体查询（Media Queries）结合 Vue 的响应式设计，根据屏幕宽度切换布局。在项目的全局 CSS 文件中定义不同断点的样式：
/* PC 端样式（默认） */
.container {
width: 1200px;
}
/* 平板横屏或小屏 PC */
@media (max-width: 1024px) {
.container {
width: 90%;
}
}
/* 移动端竖屏 */
@media (max-width: 768px) {
.container {
width: 100%;
padding: 10px;
}
}动态组件切换
通过 Vue 的 v-if 或动态组件，根据设备类型渲染不同的组件：
<template>
<div>
<PCLayout v-if="!isMobile" />
<MobileLayout v-else />
</div>
</template>
<script>
export default {
data() {
return {
isMobile: false
}
},
mounted() {
this.checkDevice()
window.addEventListener('resize', this.checkDevice)
},
methods: {
checkDevice() {
this.isMobile = window.innerWidth < 768
}
}
}
</script>REM 适配方案
使用 lib-flexible 或 postcss-pxtorem 插件实现 REM 布局，自动将设计稿像素转换为 REM 单位：
-
安装依赖：
npm install lib-flexible postcss-pxtorem --save-dev -
在
main.js中引入：import 'lib-flexible' -
配置
postcss.config.js：
module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 75, // 设计稿宽度/10（如750px设计稿） propList: ['*'] } } }
多入口打包
针对 PC 和移动端分别创建入口文件，通过构建工具生成两套资源：
-
修改
vue.config.js：module.exports = { pages: { pc: { entry: 'src/pc/main.js', template: 'public/pc.html' }, mobile: { entry: 'src/mobile/main.js', template: 'public/mobile.html' } } } -
后端根据 User-Agent 返回对应的 HTML 入口。
第三方库选择
- UI 框架：PC 端推荐
Element UI或Ant Design Vue，移动端推荐Vant或Mint UI - 工具库：
vue-device-detector检测设备类型，vue-responsive-components创建响应式组件
注意事项
- 避免在 mounted 生命周期后才切换布局，可能导致页面闪烁
- 移动端需增加 touch 事件支持，PC 端需考虑键盘交互
- 图片资源可结合
<picture>标签或srcset属性实现响应式加载
