小程序中字体大小用rpx 还是px好

关于是否使用rpx还是px，首先需要明白两者之间的区别。

rpx：微信小程序中的尺寸单位rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。微信官方建议视觉稿以iphone6为标准，一般设计师出图为启含余2倍图。

px：iphone6上1px=2rpx

1rpx相当于1个物理像素，何为物理像素，就相当于我老桐们所使用的屏幕的尺寸，只不过换了一种说法叫物理像素，而我们平时css中所用到的px,实际上是数据显示的尺寸，比如文字，图片、设计样式的盒子的大小1rpx的出现为我们搭起了物理像素与样式像素px之间的桥梁，而且根据屏幕宽度进行自适应

<view class="box">rpx的像素</view>

<view class="bo">px的像素观察</view>

.box{  width:300rpx  height:200rpx  border:1rpx solid black  font-size:30rpx}.bo{   width:300px  height:200px  border:1px solid black  font-size:30px}

结果：

所以，小程悄滚序中字体大小用rpx还是px要结合设计师出图的文字大小，建议的话还是以rpx为主。

开发过小程序的人都知道，小程序的单位是rpx，这是为什么？有什么作用呢，其实它源于rem布局，先来了解下rem的优势与工作原理。

rem布局在没正式使用到项目中，只知道他是根据html根元素的font-size来变化的

若：html{ font-size:20px}

则1rem = 20px

然后呢，有什么作用，定完html的font-size后，元素使用rem和使用px有什么区别，不都一样么？

其实rem他的主要运用场所在移动端，移动端的设计稿一般都是iphone6为基础设计的，设计稿的宽为750px；

手机的物理尺寸是375px；所以在用css的时候，设计尺寸需要除以2；

要用rem完成移动端的适配，答顷需要固定浏览器的显示宽度不变。

也就是说，我在设计稿上量到宽367px的大小，那么css里可以旁举宽直接写width:3.67rem。

此时，（以375px宽手机为例）第二步js设置的html字体大小为：375px除以7.5得50px；

7.5rem乘以50px得到的是375px刚好是屏幕的满宽。

也就是说，不论手机屏幕宽度多少，7.5rem永远能占屏幕的满宽。这样，在宽屏手机里，元素能够等比例放大一些，实现各类机型的适配，也方便了前端编码。

而做过小程序的人都知道，小程序不论任何机型，屏幕满宽都是750rpx，其实也就是从7.5rem延伸而来，至于根目录字体大小的配置，微信开发者工具已经将这些都配置好了，你尽情用就可以了。

如果有帮助，请点运亮赞支持哦。

首先要分清两种分辨率：

视觉上的清晰度 ：

单位逻辑分辨率上的物理像素点越多，视觉效果越清楚。

但是人类的眼球是有视觉极限的罩耐嫌。也就是326ppi

通常来说一个pt可以由1个px或者2个px甚至3个px构成物手

结论：工作时如果按照iphone6来设计的，将设计稿的1px=1rpx=0.5pt。由于rpx会随着屏幕的尺寸调整，所以建议文字类的不建议用rpx，亩蔽会导致页面字体过小

---