位置: IT常识 - 正文
vue项目pc端和移动端适配(vue移动和pc两套代码)
编辑：rootadmin推荐整理分享vue项目pc端和移动端适配(vue移动和pc两套代码)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:用vue做pc端适合吗,vue项目pc端和移动端适配,vue pc端,vue移动端和pc端写法一样吗,vue pc端,vue项目pc端和移动端适配,vue项目pc端和移动端多适配,vue移动端和pc端项目,内容如对您有帮助，希望把文章链接给更多的朋友！
一、样式中根据设计稿确定缩放比例（可以设置全局或者部分页面）
二、监听窗口大小改变，设置根字体大小 created() { // 获取当前设备的宽度，设置rem的根字体大小 let width = window.innerWidth; width = width <= 1200 ? 1200 : width; const htmlObj = document.getElementsByTagName(“html”)[0]; htmlObj.style.fontSize = width / 76.8 + “px”;
// 对resize事件进行浏览器兼容处理if (document.createEvent) { var event = document.createEvent("HTMLEvents"); event.initEvent("resize", true, true); window.dispatchEvent(event);} else if (document.createEventObject) { window.fireEvent("onresize");}// 监听页面resize事件，重新设置rem的根字体大小window.onresize = function () { let width = window.innerWidth; width = width <= 1200 ? 1200 : width; htmlObj.style.fontSize = width / 76.8 + "px";};},
三、使用时 如： height:px2rem(100px)
四、如果是部分页面使用，需要页面销毁时清理 destroyed() { const htmlObj = document.getElementsByTagName(“html”)[0]; htmlObj.style.fontSize = “”; window.onresize = null; },
2、移动端项目适配实现移动端适配步骤如下 1.先安装amfe-flexible和postcss-pxtorem npm install amfe-flexible --save npm install postcss-pxtorem --save 在main.js导入amfe-flexible import ‘amfe-flexible’; 2.配置postcss-pxtorem ,可在vue.config.js、postcsssrc.js、postcss.config.js、其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可 在vue.config.js配置如下 module.export={ //…其他配置 css:{ loaderOptions:{ postcss:[ require(‘postcss-pxtorem’)({ rootValue:37.5, propList:[‘‘] }) ] } } } 在.postcssrc.js或postcss.config.js中配置如下： module.exports = { “plugins”: { ‘postcss-pxtorem’: { rootValue: 37.5, propList: [’’] } } }
rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为375，即rootValue设为37.5； propList是设置需要转换的属性，这边*为所有都进行转换。 测试结果：
css中设置某类宽度为375px： .content{ width:375px; }
运行后在浏览器可以发现已经转化为10rem,即375/设置的rootValue： 以上情况则说明postcss-pxtorem配置成功 html的字体大小跟随设备宽度进行改变，body跟随设备的dpr进行改变，这是amfe-flexible的实现，即说明配置成功。 说明，安装过程中可能会遇到以下报错： 1.安装配置后，发现rem并没有生效，解决办法：使用vue.config.js去配置，不要用postcss.config.js 2.抛错[object Object] is not a PostCSS plugin。报错原因：postcss-pxtorem版本太高，更改版本为5.1.1。npm install postcss-pxtorem@5.1.1
3、同时兼任pc和移动适配通过配置两套不同路由和判断是否是移动端实现 1、写好两套路由 import Vue from “vue”; import VueRouter from “vue-router”;
Vue.use(VueRouter);
//默认路由 export const routes = [ { path: “/”, redirect: “/home”, }, ]; //pc端的路由 export const pcRoutes = [ { path: “/”, redirect: “/home”, }, { path: “/home”, name: “Home”, component: () => import(/* webpackChunkName: “about” / “…/views/home/pc.vue”), }, ]; //移动端设备路由 export const mobileRoutes = [ { path: “/”, redirect: “/home”, }, { path: “/home”, name: “Home”, component: () => import(/ webpackChunkName: “about” */ “…/views/home/mobile.vue”), }, ];
const createRouter = () => new VueRouter({ scrollBehavior: () => ({ y: 0 }), mode: “history”, routes: routes, });
const router = createRouter();
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 export function resetRouter() { const newRouter = createRouter(); router.matcher = newRouter.matcher; // reset router }
export default router;
2、封装一个判断是否是移动端的方法 // 判断设备是否为移动端的方法 export const isMobile = () => { return /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i.test( navigator.userAgent ); };
3、src目录下创建一个init.js文件用于判断机型从而添加相应的路由 import router from “./router”; import { isMobile } from “./utils”; import { pcRoutes, mobileRoutes } from “./router”;
// 判断当前设备的型号从而改变当前路由 router.addRoute(isMobile() ? mobileRoutes[1] : pcRoutes[1]);
4、最后在vue项目的入口文件main.js文件中引入init.js。 import “./init.js”;
上一篇：应付债券的会计帐务怎么处理？(应付债券的会计处理例题)
下一篇：cuda常见报错(cuda completed with errors)
