美文网首页
【构建工具2】将px自动转成rem

【构建工具2】将px自动转成rem

作者: 八宝君 | 来源:发表于2018-05-16 14:45 被阅读0次

手动打造px2rem

先npm 安装px2rem-loader

npm install px2rem-loader

然后进行配置

去webpack.config.js里配置

module.loaders.options里的配置
loader的用法是从右到左,先最右边的loader先处理,然后交给左边的,依次传递。
px2rem有几个参数跟着一起带来过、
参数1和参数2
scss文件,首先要把scss转成正常的css,然后再交给css做,所以最外层是一个sass-loader
remUnit表示的是基准数,也就是1rem = 多少px,比如:
网页里显示为0.44rem

这里的字大小是0.44rem。由于这里的remUnit是50,也就是实际字体大小是22px。

我们写的css也是22px

和我们所写的css一致。

至于html的font-size是由插件viewport.js添加上去的。


html根部的font-size 这里控制

【ps】修改这里的数字或者是remUnit都会影响渲染出来的大小


webpack3配合flexible.js设置px2rem

我又来更新了,最近又新看了一个教程,这里用的不是viewport.js而是flexible.js。和上面写的那种不太匹配。为了配置这个px2rem,查了很多资料。
最后根据这份资料成功配置成功,不容易啊!!


这是我自己浏览器渲染出来的效果

具体怎么配置,请看传送门
我觉得她写的挺好的,很详细,所以直接传送门过去啦。

相关文章

网友评论

      本文标题:【构建工具2】将px自动转成rem

      本文链接:https://www.haomeiwen.com/subject/joypdftx.html