Vue-cli3.X使用px2 rem遇到的问题及解决方法
把项目脚手架升级为cli3.x了以后,模板简洁了很多,运行起来也更加快速。但是也随之而来是某些兼容问题。比如我们要在项目钟使用px2rem来计算设计稿的时候,我们不能像以前老的脚手架那样操作了。那我们应该来如何设置呢?
首先,我们应该用npm来安装postcss-px2rem
npm i postcss-plugin-px2rem --save -dev
然后我们需要在vue.config.js中创建一个配置。由于在vue-cli3.x
中。去掉了build和config文件夹。所有的配置都放到了vue.config.js,然而这个文件脚手架并没有生成,所以需要手动在项目的根目录创建一个文件
在vue.config.js里配置
module.exports = { lintonsave: true, css: { loaderoptions: { postcss: { plugins: [ require('postcss-plugin-px2rem')({ rootvalue:75, // 新版本的是这个值 mediaquery: false, //(布尔值)允许在媒体查询中转换px。 minpixelvalue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0 }), ] } } }, }
这里需要说明一点。网上搜的一堆教程都强调应该增加remunit来设置rem的计算标准。但是其实在新版后,这个值换成了rootvalue这个。例如你设计稿为750的宽度标准,那么这里的值设置为75则可。
接下来还有一个工作。由于rem是根据根字体的大小来作为基准值的,然而我们的移动设备屏幕大小以及有些屏幕为视网膜屏的,会是普通屏幕的2倍,所以这个基准值我们需要根据不同设备来进行计算。这里我们在src/plugins下新建一个rem.js文件(代码如下)。
(function (win, lib) { var doc = win.document; var docel = doc.documentelement; var metael = doc.queryselector('meta[name="viewport"]'); var flexibleel = doc.queryselector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid; var flexible = lib.flexible || (lib.flexible = {}); if (metael) { //console.warn('将根据已有的meta标签来设置缩放比例'); var match = metael.getattribute('content').match(/initial\-scale=([\d\.]+)/); if (match) { scale = parsefloat(match[1]); dpr = parseint(1 / scale); } } else if (flexibleel) { var content = flexibleel.getattribute('content'); if (content) { var initialdpr = content.match(/initial\-dpr=([\d\.]+)/); var maximumdpr = 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) { var isandroid = win.navigator.appversion.match(/android/gi); var isiphone = win.navigator.appversion.match(/iphone/gi); var devicepixelratio = win.devicepixelratio; if (isiphone) { // ios下,对于2和3的屏,用2倍的方案,其余的用1倍方案 if (devicepixelratio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicepixelratio >= 2 && (!dpr || dpr >= 2)) { dpr = 2; } else { dpr = 1; } } else { // 其他设备下,仍旧使用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 { var wrap = doc.createelement('div'); wrap.appendchild(metael); doc.write(wrap.innerhtml); } } function refreshrem() { var width = docel.getboundingclientrect().width; if (width / dpr > 540) { width = 540 * dpr; } var rem = 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) { var val = parsefloat(d) * this.rem; if (typeof d === 'string' && d.match(/rem$/)) { val += 'px'; } return val; } flexible.px2rem = function (d) { var val = parsefloat(d) / this.rem; if (typeof d === 'string' && d.match(/px$/)) { val += 'rem'; } return val; } })(window, window['lib'] || (window['lib'] = {}));
然后在main.js里面引入该文件
import './plugins/rem.js'
这样,我们的工作就完成了。可以直接在css里面写px的绝对值。
总结
以上所述是小编给大家介绍的vue-cli3.x使用px2 rem遇到的问题及解决方法,希望对大家有所帮助
上一篇: Flutter实现App功能引导页
下一篇: Xposed插件开发入门详解
推荐阅读
-
Mysql数据库从5.6.28版本升到8.0.11版本部署项目时遇到的问题及解决方法
-
ubuntu14.04 使用中遇到的问题及解决方法集锦
-
Android开发 RadioButton使用中遇到的问题与解决方法
-
Vue2.0使用axios引入本地JSON文件时遇到的问题及解决
-
使用IDEA编写jsp时EL表达式不起作用的问题及解决方法
-
在Ajax中使用get和post所遇到的问题及解决办法
-
后台使用freeMarker和前端使用vue的方法及遇到的问题
-
XPath匹配标签使用text()判断获取结果失败/为空的问题及解决方法
-
framework7的改进,以及与vue组合使用遇到的问题以及解决方法 (附vue的原理)
-
Win10系统安装MySQL8.0.13遇到的问题及解决方法