[JavaScript知识库]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.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”;