rpx小程序（小程序中rpx和px区别）

今天给各位分享rpx小程序的知识，其中也会对小程序中rpx和px区别进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、rem的作用与运用，小程序为什么用rpx为单位
• 2、微信小程序 不同设备下的屏幕适配处理 (px和rpx换算)
• 3、什么是rpx
• 4、rpx是微信小程序WXSS的尺寸单位
• 5、微信小程序单位rpx解析
• 6、小程序的ui框架尺寸

rem的作用与运用，小程序为什么用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延伸而来，至于根目录字体大小的配置，微信开发者工具已经将这些都配置好了，你尽情用就可以了。

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

微信小程序 不同设备下的屏幕适配处理 (px和rpx换算)

改为rpx的作用：微信底层会根据屏幕宽度自动调整标签中则裤 所设庆敏置的尺寸大小，不用我誉盯枝们过问。

以下图为例，ui给定的头像的宽高为90px：

总结：ui以苹果6或者苹果6plus为模板设计出来的图片，px和rpx都需要做运算处理，规律如上，小程序官方文档建议ui以苹果6模板作图。

我的这篇文章有各种设备的尺寸信息 手机屏幕尺寸、设备信息

什么是rpx

rpx： 是微信小程序独有的，解决屏幕自适应的尺寸单位

可以根据屏幕宽度进行自适应，不论屏幕大亮局键小敬巧，规定屏幕宽为 750rpx，通过rpx设置元素和字体大小，小程序在 不同尺寸 的屏幕上可以 自适应适配

以 iPhone6 为例，iPhone6 的屏幕宽度为 375px ，共有 750 个物理像腊培素，则 750rpx = 375px = 750 物理像素

1rpx=0.5px=1物理像素

rpx是微信小程序WXSS的尺寸单位

rpx是微信小程序WXSS的尺寸单位。介绍rpx前，先要介绍WXSS。

WXSS(WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定小程序页面WXML的组件应该怎么显示。

为了适应广大的前端开发者，微信小程序的 WXSS 具有 CSS 大部分特性。 同时为了更蚂歼适合开发小程序，微信开发者对 CSS 进行了闷碧冲扩充以及修改。

与 CSS 相比WXSS扩展的特性有：

其中，rpx就是尺寸单位。

建议 ： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意 ：慧巧 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

参考资料： 微信小程序开发文档

微信小程序单位rpx解析

首先要分清两种分辨率：

视觉上的清晰度 ：

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

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

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

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

小程序的ui框架尺寸

小程序的 UI 设计指南在小程序官方文档中均有介绍，以微信官方设计文档为参照：

1、 小程序布局：小程序的布局主要采用块察大状结构进行布局，优先采用卡片、列表或网格等布局方式；

2、 小程序 UI 调色：小程序的 UI 调色使用典型的灰色调子，较亮的颜色基调使用明度较浅的颜色余巧；

3、小程序 UI 尺寸：败毁竖采用 1080px 宽，720px 高的界面设计尺寸，控件尺寸以 8px 为基准单位，即每个控件的间距需以 8px 设计；

4、 小程序 UI 字号：字体最大尺寸 36px，最小尺寸 24px，中等字体尺寸使用 30px。

关于rpx小程序和小程序中rpx和px区别的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。