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