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: /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”;
