先上个链接
https://github.com/imochen/hotcss/tree/master/src
重要文件就是这些,我使用的是sass,下载下来,放到项目目录里,下面是我的(vue-cli3)目录,我在创建项目的时候选择了sass 作为了css的预处理器 。
放进项目之后,要做的是引入hotcss.js 和 px2rem.scss ,先来看一下 px2rem.scss 的内容
就这些东西,需要注意的是,$designWidth 的值 是你ui设计稿的宽度,这里我的设计稿是750;
引入px2rem.scss 的方式 是通过vue.config.js 引入的,vue.config.js的配置这里不多说明,可以去官方文档中查看,以下的引入px2rem.scss 的 vue.config.js ,要注意路径问题。
引入hotcss.js直接在main.js 中引入就可以了,然后用法就是 width:100px 要写成 width:px2rem(100),不用带单位哦,因为在px2rem.scss 中就已经加上rem单位了。
ok!