简单的px自动转换成rem方法

原创 zhaozhangnan 随笔 点滴 392阅读 2017-05-12 19:01:31 举报

新手一枚,前几个移动端的页面都是手动的计算 rem,不但累有的时候还算的不准,于是就琢磨怎么让px转换成rem,看了很多的网站 他们的站点小数点后边有很多位 我就想到了肯定是动态生成的。 于是就自己着手研究了。哈哈终于让我研究出来了 简单的方法了。
方法就是利用scss的函数可以计算的 属性。那么scss怎么样自动生成css呢 我就是利用hbuilder编辑器他有自动处理预编译的插件。于是我就安装上了。使用如下:
html 代码

第一步、在scss中引入 你自己已经定义好的函数function.scss。
第二步、在需要的地方 直接调用scss中定义好的函数 toRem(你得到的px值),scss在自动编译的时候就会自动变换成rem;
最后我们来看一下 function.scss 中是怎么定义 这个函数的吧,
html 代码

就是这么少啊
这个跟普通的js的函数 是没什么区别的,就是传入的参数直除以 你调试的机型的fontsize 再加上rem直接return 出来就行。我是按6s plus调的 是55.2 在 6下是50px 这个根据自己的情况设定具体的值就行。
以后再做项目的时候直接 用px就行。
备注:在scss中使用中文会报错,所以就需要在scss头部加utf-8;
欢迎指正菜鸟一个,大神勿喷!!!。再此谢过。

评论 ( 2 )
最新评论
zhaozhangnan 1F 2017-05-15 10:21:08 2F

less或sass方法应该都是一样的吧 关键看习惯用哪个

Nicky_Wu 2017-05-12 22:09:16 1F

习惯了用less写css样式,px转化成rem也很方便,自动计算