首页IT科技vue兼容移动端(vue项目pc端和移动端适配)

vue兼容移动端(vue项目pc端和移动端适配)

时间2025-09-10 10:44:58分类IT科技浏览8135
导读:vue项目pc端和移动端适配 1、pc端适配...

vue项目pc端和移动端适配

1                  、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     ”;

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
自媒体爆文采集工具(如何挖掘自媒体爆文采集网站的价值) Web前端开发职业技能等级证书(前端设计模式——命令模式)