boy 火巨
因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem。要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量。所以,直接使用插件没商量。
第一步:因为rem是根据更元素来计算大小,所以,捕捉到当前屏幕的大小并赋值给html,这是其一
第二步:使用px2rem插件,来捕捉当前项目的所有px,直接计算相对应数值。
这样,以后写界面,就可以直接用px来构建界面,不用自己去计算啦!
1、安装插件(我是安装了淘宝镜像,所以是cnpm,若是没装淘宝镜像,就npm)
2、配置px2rem
build目录下vue-loader.conf.js中,做如下修改:
module.exports = {
loaders: utils.cssLoaders({
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
}),
transformToRequire: {
video:
'src'
,
source:
'src'
,
img:
'src'
,
image:
'xlink:href'
},
postcss:[require(
'postcss-px2rem'
)({
'remUnit'
:37.5,
'baseDpr'
:2})]
/*因为我是以750px(iphone6)宽度为基准,所以remUnit为37.5*/
}
3、在static目录中,建js文件夹,放flex.js:
(内容太多在网页上)
4、在index.html中,加入flex.js
5、重启项目
扫描二维码关注公众号,回复:
953289 查看本文章
大功告成!!
现在你就可以在浏览器中,看到你的px换算成了rem啦!
Vue用rem布局用px2rem插件
http://www.jb51.net/article/135276.htm
原文链接:https://juejin.im/post/5a65751e51882573541c7c78