1.一套代码实现pc端和移动端兼容。
（1）获取设备类型
// main.js navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
（2）样式适配
-
拆分两套css
通过判断终端类型，加载不同的css文件，控制元素显隐
-
媒体查询结合rem实现PC端和移动端共用一套代码的适配方案
媒体查询 @media为不同的尺寸设备应用不同的样式
rem 是一个根据 html 根元素 font-size 计算的相对单位（让大小尺寸不一的手机都能按比例的缩放）。rem适合写固定尺寸，其余的根据需要换成flex或者百分比。
<style scope>/* PC端的CSS样式代码 */ @media screen and (max-width: 750px) {/* 移动端的CSS样式代码 */}</style>
2.一个项目两套代码，一套路由规则开发。
（1）获取当前设备类型，共享给全局使用
-
pinia 中定义名为 device 的 state，用于全局共享当前设备（pc || mobile）
-
app.vue监听当前设备类型
mounted() {
window.addEventListener('resize', this.resizeChange, false)
}
resizeChange () {
// 判断是否是 pc 或者 移动端
// 默认设置当屏幕宽度 > 1000 时，为PC端
if (document.documentElement.clientWidth > 1000) {
useDevice.setDevice('pc')
} else {
// 默认设置当屏幕宽度 <= 1000 时，为移动端
useDevice.setDevice('mobile')
}
},
// 也可以用机型之类的条件来判断
resizeChange () {
const width = document.documentElement.clientWidth
// 先判断 UA 是否为移动端设备（手机&平板）
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
this.mode = 'mobile'
} else {
// 如果为桌面设备，再根据页面宽度判断是否需要切换为移动端展示
if (width < 992) {
useDevice.setDevice('mobile')
} else {
useDevice.setDevice('pc')
}
}
}
destroyed () {
window.removeEventListener('resize', this.resizeChange, false)
}
- 页面结构
device/index.vue中使用动态组件，控制使用device/pc.vue 或device/mobile.vue。
（2） 使用 postcss-px-to-viewport 将项目中的 px 单位转换为 vw
配置include: [/device\\m.vue/]使我们移动端代码中的 px 单位自动转换为 vw，而 pc 端的代码不受影响。
有的使用postcss-pxtorem、amfe-flexible做Rem适配
amfe-flexible：根据屏幕宽度，自动设置html的font-size postcss-pxtorem：自动将px单位转换成rem
(3) mixins 来优化
pc端 和 移动端 的差别更多体现在页面元素的样式上（大小、位置、显隐），而实际的业务逻辑变化并不大。比如可以在首页 index 页面目录下添加一个 mixin.js 文件，将 device/pc.vue 和 device/mobile.vue 的公共业务逻辑抽离到该文件中，从而实现复用。
3.一个项目两套代码，两套路由规则开发
同时兼任pc和移动适配
通过配置两套不同路由和判断是否是移动端实现
核心代码：*router.addRoute(isMobile() ? mobileRoutes[1] : pcRoutes[1])；*（区分路由）
路由适配（路由守卫），组件适配
比较麻烦，不推荐
标签：vue,适配,兼容,pc,device,移动,路由 From： https://www.cnblogs.com/wq805/p/18683241