cssrem转换工具_css中px自动转换成rem方法

原标题:css中px自动转换成rem方法

作为一名前端开发,一直是用的px做为单位 ,但是发现在手机中效果不好 单位不精确 和 太固定 。所以在做移动端适配时,rem是我们经常用到的单位,它的好处大家应该都清楚!

但是我们在将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时、费力的过程,下面就讲解下如何快速将px转换成rem!有兴趣的小伙伴们可以一起研究下。

方法原理是利用scss的函数可以计算的 属性。那么scss怎么样自动生成css呢 利用hbuilder编辑器他有自动处理预编译的插件。使用如下:

html代码:

第一步、在scss中引入 你自己已经定义好的函数function.scss。第二步、在需要的地方 直接调用scss中定义好的函数 toRem(你得到的px值),scss在自动编译的时候就会自动变换成rem。 function.scss 中的定义 :

这个跟普通的js的函数 是没什么区别的,就是传入的参数直除以 你调试的机型的fontsize 再加上rem直接return 出来就行。我是按6s plus调的 是55.2 在 6下是50px 这个根据自己的情况设定具体的值就行。以后再做项目的时候直接 用px就行。备注:在scss中使用中文会报错,所以就需要在scss头部加utf-8;返回搜狐,查看更多

责任编辑:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值