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