sass-rpx 微信小程序开发 px -> rpx 转换

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了sass-rpx 微信小程序开发 px -> rpx 转换相关的知识，希望对你有一定的参考价值。

参考技术A

微信小程序这个幺蛾子，不仅自己搞了一套所谓 WXSS 的样式表，还创造了一个新的单位 rpx 。

这时候问题就来了，现在的设计稿一般基于 iPhone6（375px × 667px），势必在其他尺寸的手机中有有所不同。在手机浏览器上，为了消除差异，我们可以使用 rem 作为单位，通过改变 html 下的 font-size 来消除在不同尺寸手机上的差异，但是在微信小程序上只能通过 rpx 来消除。

在使用 sass 时，前辈们已经实现了从 px 转换到 rem 的各种轮子，其中比较赞的有 @pierreburel 所编写的 sass-rem 。本文所使用的轮子也是 fork 自 sass-rem 。

基于前辈们的努力，我便重写了 sass-rem ，以适用于 rpx 的场景。

具体项目请参见： sass-rpx

SCSS

CSS

SCSS

CSS

微信小程序开发教程目录

以上是关于sass-rpx 微信小程序开发 px -> rpx 转换的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序开发手记之五：组件

微信小程序开发手记之五：组件

微信小程序开发入门首选

微信小程序开发教程目录

微信小程序开发优秀教程及文章合集第一期

微信小程序开发需要学啥知识