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

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

时间2025-04-30 05:55:59分类IT科技浏览5994
导读: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
chattr operation not permitted(已解决chatgpt报错出了些问题。如果此问题仍然存在,请通过我们的帮助中心 help.openai.com 与我们联系。) 麻雀搜索算法pid(麻雀优化算法SSA及其改进策略)