// main.jsnavigator.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文件,控制元素显隐
-
媒体查询结合rem实现PC端和移动端共用一套代码的适配方案
媒体查询 @media为不同的尺寸设备应用不同的样式
rem 是一个根据 html 根元素 font-size 计算的相对单位(让大小尺寸不一的手机都能按比例的缩放)。rem适合写固定尺寸,其余的根据需要换成flex或者百分比。
<style scope>/* PC端的CSS样式代码 */@media screen and (max-width: 750px) {/* 移动端的CSS样式代码 */}</style>
-
-
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。
配置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 的公共业务逻辑抽离到该文件中,从而实现复用。
通过配置两套不同路由和判断是否是移动端实现
核心代码:*router.addRoute(isMobile() ? mobileRoutes[1] : pcRoutes[1]);*
(区分路由)
路由适配(路由守卫),组件适配
比较麻烦,不推荐