把项目脚手架升级为cli3.X了以后,模板简洁了很多,运行起来也更加快速。但是也随之而来是某些兼容问题。比如我们要在项目钟使用px2rem来计算设计稿的时候,我们不能像以前老的脚手架那样操作了。那我们应该来如何设置呢?
首先,我们应该用NPM来安装postcss-px2rem
npm我postcss-plugin-px2rem -保存- dev
然后我们需要在vue.config.js中创建一个配置。由于在vue-cli3.X中。去掉了构建和配置文件夹。所有的配置都放到了vue.config.js,然而这个文件脚手架并没有生成,所以需要手动在项目的根目录创建一个文件
在vue.config.js里配置
模块。出口={
lintOnSave:没错,
css: {
loaderOptions: {
postcss: {
插件:[
要求(postcss-plugin-px2rem) {
rootValue: 75//新版本的是这个值
mediaQuery:假的,//(布尔值)允许在媒体查询中转换px。
minPixelValue: 3//设置要替换的最小像素值(3 px会被转rem)。默认0
}),
]
}
}
}，
}
这里需要说明一点。网上搜的一堆教程都强调应该增加remUnit来设置rem的计算标准。但是其实在新版后,这个值换成了rootValue这个。例如你设计稿为750的宽度标准,那么这里的值设置为75则可。
接下来还有一个工作,由于雷是根据根字体的大小来作为基准值的,然而我们的移动设备屏幕大小以及有些屏幕为视网膜屏的,会是普通屏幕的2倍,所以这个基准值我们需要根据不同设备来进行计算。这里我们在src/插件下新建一个rem.js文件(代码如下)。
(函数(赢,自由){
var doc=win.document;
var docEl=doc.documentElement;
var metaEl=doc.querySelector(“元[name="视窗"]”);
var flexibleEl=doc.querySelector(“元[name=傲榛睢盷”);
var dpr=0;
var规模=0;
var tid;
var灵活=lib.flexible | | (lib.flexible={});
如果(metaEl) {//console.warn(“将根据已有的元标签来设置缩放比例”);
var=metaEl.getAttribute匹配(“内容”).match(/初始\剂量=((\ d \] +)/);
如果(匹配){
比赛规模=parseFloat ([1]);
dpr=方法(1/规模);
}
}else if (flexibleEl) {
var=flexibleEl.getAttribute内容(“内容”);
如果(内容){
var initialDpr=content.match(/初始\ dpr=((\ d \] +)/);
var maximumDpr=content.match(/最大\ dpr=((\ d \] +)/);
如果(initialDpr) {
dpr=parseFloat (initialDpr [1]);
规模=parseFloat ((1/dpr) .toFixed (2));
}
如果(maximumDpr) {
dpr=parseFloat (maximumDpr [1]);
规模=parseFloat ((1/dpr) .toFixed (2));
}
}
}
如果(!dpr,,!规模){
var isAndroid=win.navigator.appVersion.match (/android/gi);
var isIPhone=win.navigator.appVersion.match (/iphone/gi);
var devicePixelRatio=win.devicePixelRatio;
如果(isIPhone) {//iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
如果(devicePixelRatio祝辞=3,,(！dpr | | dpr祝辞=3)){
dpr=3;
}else if (devicePixelRatio祝辞=2,,(！dpr | | dpr祝辞=2)){
dpr=2;
其他}{
dpr=1;
}
其他}{//其他设备下,仍旧使用1倍的方案
dpr=1;
}
规模=1/dpr;
}
docEl。setAttribute (data-dpr, dpr);
如果(! metaEl) {
metaEl=doc.createElement(元);
metaEl。setAttribute(“名字”,“视口”);
metaEl。setAttribute(“内容”,“初始=' + +”,最大范围=肮婺? +”,最小规模=' +规模+ ',user-scalable=no ');
如果(docEl.firstElementChild) {
docEl.firstElementChild.appendChild (metaEl);
其他}{
var包=doc.createElement (div);
wrap.appendChild (metaEl);
doc.write (wrap.innerHTML);
}
}
函数refreshRem () {
var=docEl.getBoundingClientRect宽度().width;
如果(宽/dpr祝辞540){
宽度=540 * dpr;
}
var rem=宽/10;
docEl.style。字形大?rem +“px”;
灵活。rem=赢。rem=快速眼动;
}
赢了。addEventListener(“调整”,函数(){
clearTimeout (tid);
tid=setTimeout (refreshRem, 300);
},假);
赢了。addEventListener (pageshow,函数(e) {
如果(e.persisted) {
clearTimeout (tid);
tid=setTimeout (refreshRem, 300);
}
},假);
如果(doc。readyState==='完成'){
doc.body.style。字形大?12 * dpr +“px”;
其他}{
医生。addEventListener (DOMContentLoaded”内,函数(e) {
doc.body.style。字形大?12 * dpr +“px”;
},假);
}
refreshRem ();
灵活。dpr=赢。dpr=dpr;
灵活。refreshRem=refreshRem;
灵活。rem2px=function (d) {
var val=parseFloat (d) * this.rem;
如果(typeof d==='字符串',,d.match (rem美元/)){
val +=皃x”;
}
返回val;
}
灵活。px2rem=function (d) {
var val=parseFloat (d)/this.rem;
如果(typeof d==='字符串',,d.match (/px/美元)){
val +=翱焖傺鄱?
}
返回val;
}
})(窗口,窗口(“自由”)| |(窗口(“自由”)={})),
