px和rem之间的转换(附带自动转换插件)

原创 1292150917a 随笔 个人封装 263阅读 2018-04-19 18:02:48 举报

本人是技术宅,不会华丽的语言,只有感觉你用得到的新知识.
如果写移动端难免会接触到一个单位(rem),那么rem的换算想必大家都知道1rem = 16px (默认) 因为浏览器的字体默认是16px的
如果我们需要写的话必须要加js

这段js就是转换rem 这样你使用rem的时候就可以自动适配 我这里写的是1rem = 20rem,具体的运算思路请百度把,我就不做详细的讲解了

emmmm..好像有点跑题了 下面进入正题:px2rem

px2rem 是一个npm的插件 他可以自动把px转换成rem 这样你使用的时候就可以直接用你熟悉的px做单位,然后插件会自动帮你换算打包成rem的 安装也是非常方便 下面送上安装步骤

第一步肯定是安装px2rem了

这个代码的意思我就不用多说了吧。安装px2rem模块

第二步修改webpack的配置

找到webpack的目录然后进入build文件夹 找到utils.js输入以下代码

代码不做详细的解释,这里主要是解释一下remunit:20这里的作用 由于官方文档说的是设计图/10 我去试了一下发现并不是这样的 我理解的remunit是20px == 1rem 进行转换 我这里的代码是在750的设计图上 代码直接/2写375px就好了 也就是完全 按照设计图的比例/2 然后写到你的页面上(注:单位是px,他会自动转换,你不要手写rem)

注意了:emmmm

最后找到generateLoaders()这个函数 里面有一个变量loaders
vue版本的是

去开始你的装逼之旅把!
如果你坚持把我的语句看完了,那么送你点福利。

这个console.log()会输出一个蓝色的你好啊 就是这么神奇
console.log(参数1,参数2) 参数1是代码块:$C必带的 后面是内容 参数2是css样式 比如backgorund-url:"" 什么的。。。开启你的想想之旅
切记字符串内换行请加\n

评论 ( 2 )
最新评论
1292150917a 1F 13 天前 2F

可以的
console.log('%c你好啊',"color:red")
这种方式 谢谢 后面可以随便写
试一下这个
console.log("%c", unescape("padding%3A50px%20100px%3Bbackground%3Aurl%28%27http%3A//s16.sinaimg.cn/large/006O9DnHzy7b2afrsIL1f%26690%27%29%3Bbackground-size%3A100px%20100px"))
你会明白什么意思的

472669624 2018-04-20 10:08:20 1F

console.log('$c你好啊',"color:red")大哥你不要在这骗人了,我打出来就是一个文本,没有你说的颜色是蓝色的