vue項(xiàng)目pc端和移動(dòng)端適配

1、pc端適配

一、樣式中根據(jù)設(shè)計(jì)稿確定縮放比例（可以設(shè)置全局或者部分頁面）

二、監(jiān)聽窗口大小改變，設(shè)置根字體大小
created() {
// 獲取當(dāng)前設(shè)備的寬度，設(shè)置rem的根字體大小
let width = window.innerWidth;
width = width <= 1200 ? 1200 : width;
const htmlObj = document.getElementsByTagName(“html”)[0];
htmlObj.style.fontSize = width / 76.8 + “px”;

// 對resize事件進(jìn)行瀏覽器兼容處理
if (document.createEvent) {
  var event = document.createEvent("HTMLEvents");
  event.initEvent("resize", true, true);
  window.dispatchEvent(event);
} else if (document.createEventObject) {
  window.fireEvent("onresize");
}

// 監(jiān)聽頁面resize事件，重新設(shè)置rem的根字體大小
window.onresize = function () {
  let width = window.innerWidth;
  width = width <= 1200 ? 1200 : width;
  htmlObj.style.fontSize = width / 76.8 + "px";
};

},

三、使用時(shí)
如： height:px2rem(100px)

四、如果是部分頁面使用，需要頁面銷毀時(shí)清理
destroyed() {
const htmlObj = document.getElementsByTagName(“html”)[0];
htmlObj.style.fontSize = “”;
window.onresize = null;
},

2、移動(dòng)端項(xiàng)目適配

實(shí)現(xiàn)移動(dòng)端適配步驟如下
1.先安裝amfe-flexible和postcss-pxtorem
npm install amfe-flexible --save
npm install postcss-pxtorem --save
在main.js導(dǎo)入amfe-flexible
import ‘a(chǎn)mfe-flexible’;
2.配置postcss-pxtorem ,可在vue.config.js、postcsssrc.js、postcss.config.js、其中之一配置，權(quán)重從左到右降低，沒有則新建文件，只需要設(shè)置其中一個(gè)即可
在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根據(jù)設(shè)計(jì)稿寬度除以10進(jìn)行設(shè)置，這邊假設(shè)設(shè)計(jì)稿為375，即rootValue設(shè)為37.5；
propList是設(shè)置需要轉(zhuǎn)換的屬性，這邊*為所有都進(jìn)行轉(zhuǎn)換。
測試結(jié)果：

css中設(shè)置某類寬度為375px：
.content{
width:375px;
}

運(yùn)行后在瀏覽器可以發(fā)現(xiàn)已經(jīng)轉(zhuǎn)化為10rem,即375/設(shè)置的rootValue：
以上情況則說明postcss-pxtorem配置成功
html的字體大小跟隨設(shè)備寬度進(jìn)行改變，body跟隨設(shè)備的dpr進(jìn)行改變，這是amfe-flexible的實(shí)現(xiàn)，即說明配置成功。
說明，安裝過程中可能會(huì)遇到以下報(bào)錯(cuò)：
1.安裝配置后，發(fā)現(xiàn)rem并沒有生效，解決辦法：使用vue.config.js去配置，不要用postcss.config.js
2.拋錯(cuò)[object Object] is not a PostCSS plugin。報(bào)錯(cuò)原因：postcss-pxtorem版本太高，更改版本為5.1.1。npm install postcss-pxtorem@5.1.1

3、同時(shí)兼任pc和移動(dòng)適配

通過配置兩套不同路由和判斷是否是移動(dòng)端實(shí)現(xiàn)
1、寫好兩套路由
import Vue from “vue”;
import VueRouter from “vue-router”;

Vue.use(VueRouter);

//默認(rèn)路由
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”),
},
];
//移動(dòng)端設(shè)備路由
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、封裝一個(gè)判斷是否是移動(dòng)端的方法
// 判斷設(shè)備是否為移動(dòng)端的方法
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目錄下創(chuàng)建一個(gè)init.js文件用于判斷機(jī)型從而添加相應(yīng)的路由
import router from “./router”;
import { isMobile } from “./utils”;
import { pcRoutes, mobileRoutes } from “./router”;

// 判斷當(dāng)前設(shè)備的型號(hào)從而改變當(dāng)前路由
router.addRoute(isMobile() ? mobileRoutes[1] : pcRoutes[1]);

4、最后在vue項(xiàng)目的入口文件main.js文件中引入init.js。
import “./init.js”;文章來源地址http://www.zghlxwxcb.cn/news/detail-408459.html

到了這里，關(guān)于vue項(xiàng)目pc端和移動(dòng)端適配的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！