vue兼容移动端(vue项目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.13 、同时兼任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版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!