上一篇介绍了怎么安装Webstorm插件px2rwd,在开发中可以帮助我们快速地进行px和rem的换算。下面来介绍一种在Vue中px2rem的模块,该模块会自动地将px转换成rem,而不用再去换算,方便我们以后去检查项目。在写项目的过程中,我们直接写px即可,它会根据我们屏幕的大小自动地进行px和rem的换算,非常方便,快来看一下吧
前提准备:已经是使用vue-cli搭建好的项目
vue-cli搭建项目步骤如下
npm i vue-cli -g
vue init webpack demo
(项目名)cd demo
npm start
1、搭建好项目之后,安装相应的插件
1、安装lib-flexible包
npm i lib-flexible --save
2、安装px2rem-loader插件
npm i px2rem-loader --save
安装完成之后,在package.json
可以看到
2、配置px2rem-loader插件
在main.js引入lib-flexible插件
import 'lib-flexible'
在build --> utils.js文件里的exports.cssLoaders
配置px2rem-loader插件
代码如下:
// 配置px2rem-loader
const px2remLoader = {
loader: 'px2rem-loader',
options: {
// 根据你的设计稿而定,remUnit = 设计稿 / 10;
/**
* 根据你的设计稿而定
* 比如750px的设计稿,remUnit = 750 / 10 = 75;
* 640的设计稿,remUnit = 640 / 10 = 64;
*/
remUnit: 75
}
}
不要忘了还要在generateLoaders
函数里面把px2remLoader
添加进去哦
3、重启vue项目即可生效
npm start
4、效果如下图
可以看到,在vue文件里面还是px的单位,到浏览器中就自动地被转成了rem,非常方便,而且会跟着屏幕的变化而不断地变化,再也不用手动去考虑适配的问题了
5、说明
这个插件的原理和我们手动设置html元素的font-size其实差不多,是根据屏幕的大小去改变font-size的值,图中可以看到html的font-size不停地在变化
【注意】这个默认最大的宽度是540px,但宽度大于540px时,就font-size就不再发生变化,默认是54px
6、后记
由于知识有限,有写得不对的欢迎大家指正
【上一篇,Webstorm安装px2rem插件】