這篇文章主要介紹了Vue-cli3.X使用px2rem遇到的問題及解決方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
把項目腳手架升級為cli3.X了以后，模板簡潔了很多，運行起來也更加快速。但是也隨之而來是某些兼容問題。比如我們要在項目鐘使用px2rem來計算設(shè)計稿的時候，我們不能像以前老的腳手架那樣操作了。那我們應(yīng)該來如何設(shè)置呢？
首先，我們應(yīng)該用NPM來安裝postcss-px2rem
npm i postcss-plugin-px2rem? --save -dev
然后我們需要在vue.config.js中創(chuàng)建一個配置。由于在vue-cli3.X中。去掉了build和config文件夾。所有的配置都放到了vue.config.js，然而這個文件腳手架并沒有生成，所以需要手動在項目的根目錄創(chuàng)建一個文件
在vue.config.js里配置
module.exports = {
? lintOnSave: true,
? css: {
? ? loaderOptions: {
? ? ? postcss: {
? ? ? ? plugins: [
? ? ? ? ? require('postcss-plugin-px2rem')({
? ? ? ? ? ? rootValue:75,? ? ? // 新版本的是這個值
? ? ? ? ? ? mediaQuery: false, //（布爾值）允許在媒體查詢中轉(zhuǎn)換px。
? ? ? ? ? ? minPixelValue: 3 //設(shè)置要替換的最小像素值(3px會被轉(zhuǎn)rem)。 默認 0
? ? ? ? ? }),
? ? ? ? ]
? ? ? }
? ? }
? },
}
要說明一點。網(wǎng)上搜的一堆教程都強調(diào)應(yīng)該增加remUnit來設(shè)置rem的計算標準。但是其實在新版后，這個值換成了rootValue這個。例如你設(shè)計稿為750的寬度標準，那么這里的值設(shè)置為75則可。
接下來還有一個工作。由于rem是根據(jù)根字體的大小來作為基準值的，然而我們的移動設(shè)備屏幕大小以及有些屏幕為視網(wǎng)膜屏的，會是普通屏幕的2倍，所以這個基準值我們需要根據(jù)不同設(shè)備來進行計算。這里我們在src/plugins下新建一個rem.js文件（代碼如下）。
(function(win, lib) {
??vardoc = win.document;
??vardocEl = doc.documentElement;
??varmetaEl = doc.querySelector('meta[name="viewport"]');
??varflexibleEl = doc.querySelector('meta[name="flexible"]');
??vardpr = 0;
??varscale = 0;
??vartid;
??varflexible = lib.flexible || (lib.flexible = {});
??if(metaEl) {
????//console.warn('將根據(jù)已有的meta標簽來設(shè)置縮放比例');
????varmatch = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
????if(match) {
??????scale = parseFloat(match[1]);
??????dpr = parseInt(1 / scale);
????}
??} elseif(flexibleEl) {
????varcontent = flexibleEl.getAttribute('content');
????if(content) {
??????varinitialDpr = content.match(/initial\-dpr=([\d\.]+)/);
??????varmaximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
??????if(initialDpr) {
????????dpr = parseFloat(initialDpr[1]);
????????scale = parseFloat((1 / dpr).toFixed(2));
??????}
??????if(maximumDpr) {
????????dpr = parseFloat(maximumDpr[1]);
????????scale = parseFloat((1 / dpr).toFixed(2));
??????}
????}
??}
??if(!dpr && !scale) {
????varisAndroid = win.navigator.appVersion.match(/android/gi);
????varisIPhone = win.navigator.appVersion.match(/iphone/gi);
????vardevicePixelRatio = win.devicePixelRatio;
????if(isIPhone) {
??????// iOS下，對于2和3的屏，用2倍的方案，其余的用1倍方案
??????if(devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
????????dpr = 3;
??????} elseif(devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
????????dpr = 2;
??????} else{
????????dpr = 1;
??????}
????} else{
??????// 其他設(shè)備下，仍舊使用1倍的方案
??????dpr = 1;
????}
????scale = 1 / dpr;
??}
??docEl.setAttribute('data-dpr', dpr);
??if(!metaEl) {
????metaEl = doc.createElement('meta');
????metaEl.setAttribute('name', 'viewport');
????metaEl.setAttribute('content', 'initial-scale='+ scale + ', maximum-scale='+ scale + ', minimum-scale='+ scale + ', user-scalable=no');
????if(docEl.firstElementChild) {
??????docEl.firstElementChild.appendChild(metaEl);
????} else{
??????varwrap = doc.createElement('div');
??????wrap.appendChild(metaEl);
??????doc.write(wrap.innerHTML);
????}
??}
??functionrefreshRem() {
????varwidth = docEl.getBoundingClientRect().width;
????if(width / dpr > 540) {
??????width = 540 * dpr;
????}
????varrem = width / 10;
????docEl.style.fontSize = rem + 'px';
????flexible.rem = win.rem = rem;
??}
??win.addEventListener('resize', function() {
????clearTimeout(tid);
????tid = setTimeout(refreshRem, 300);
??}, false);
??win.addEventListener('pageshow', function(e) {
????if(e.persisted) {
??????clearTimeout(tid);
??????tid = setTimeout(refreshRem, 300);
????}
??}, false);
??if(doc.readyState === 'complete') {
????doc.body.style.fontSize = 12 * dpr + 'px';
??} else{
????doc.addEventListener('DOMContentLoaded', function(e) {
??????doc.body.style.fontSize = 12 * dpr + 'px';
????}, false);
??}
??refreshRem();
??flexible.dpr = win.dpr = dpr;
??flexible.refreshRem = refreshRem;
??flexible.rem2px = function(d) {
????varval = parseFloat(d) * this.rem;
????if(typeofd === 'string'&& d.match(/rem$/)) {
??????val += 'px';
????}
????returnval;
??}
??flexible.px2rem = function(d) {
????varval = parseFloat(d) / this.rem;
????if(typeofd === 'string'&& d.match(/px$/)) {
??????val += 'rem';
????}
????returnval;
??}
})(window, window['lib'] || (window['lib'] = {}));
然后在main.js里面引入該文件
import './plugins/rem.js'
這樣，我們的工作就完成了。可以直接在css里面寫px的絕對值。
總結(jié):? ?以上所述是小編給大家介紹的Vue-cli3.X使用px2 rem遇到的問題及解決方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
