Allow applets to fit different system platforms, the app is doing-IT information
As we all know, the applet is a cross-platform system. This means, the applet will run on different devices, but different device resolutions vary. In the applet, how to ensure the Visual elements on different devices display correctly? This requires dynamic size unit called RPX. In this issue we RPX units to bring a small resolution, want to be able to help you solve all questions related to RPX.
Why the need for dynamic and RPX?
"On the screen, every picture is formed by numerous dot-matrix. In this dot-matrix, each point is called a pixel, that pixel (abbreviated to PX).
The remark above, for many people it is common sense.
However, as the Retina screen (the "retina display") launched and the popularity of the high score screen, 1 PX represents the actual length is not static.
For cross-platform, cross-device application, simply use the PX and meet your needs. Because it is difficult to ensure the applet element, can display properly on a different devices--same PX size elements appear on the high score screen will be significantly lower than in split-screen look even smaller.
Therefore, we need a dynamic unit of length. This unit by adjustment and adaptation to different screen resolutions, ensuring the same elements in different screen display is normal.
Apple and Google are the appropriate measures:
? Optimization of Apple on the high score screen is good, so on the iOS code representatives by 1 PX in the actual pixels to be dynamically adjusted based on different devices, the developer does not need a second conversion.
? Because the Android device fragmentation severely, Google had to create a new named "density-independent pixel (density-independent pixels, abbreviated DP)" size to fit different screen size resolution conversion.
App provides the applet with a dynamic solution: it is responsive pixel (dynamic pixels), known as RPX.
Pixel with RPx, DP how to convert it?
Understanding dynamic units come from the future, our next step is to learn how to PX conversion with RPx, and DP.
Basic concepts of dynamic conversion of units and PX is: choose a resolution as a baseline in the baseline resolution, how long is a one-pixel display, on the other screen will display the same length.
For example, DP and PX conversion formula is: DP = PX * (target device dpi resolution/160).
But RPX conversion applet, and other dynamic unit conversion method is slightly different. Micro-official conversion more "idiot": RPX = PX * (target device width PX/750).
To cite an example:
? Target device breadth 375px conversion in accordance with 750rpx, if 1rpx = 0.5px
? The width of the target device for a 1125px, the converted 1rpx = 1.5px
Think is not quite right? Yes, if you drop a micro applet to run on Tablet PC, px values are likely to change the width of the screen (screen anyway, split-screen mode, and so on). At this time, then the width as the benchmark, there will be elements not displaying the right questions.
From this we can see that app team now does not want to extend the applet to phone other than the device. Therefore, developers can focus on improving procedures for the time being on the phone experience without having to worry about adaptation problems of multiple screen sizes.
That could make RPX and DP for interchange? Certainly not!
DP is based on screen resolution of dynamic units, and RPX is based on length of dynamic units. Just like the "m" and "square" are not interchangeable, both DP and RPX will not directly interchangeable, unless the app official RPX benchmark set for resolution of a benchmark rather than length.
What can designers do?
Micro-dynamic units using RPX, designs size units are also recommended to use RPX. So here's the thing, if you want to use RPX units, to what size screen as the standard design would be a good fit?
In the official document, we find this message:
"IPhone 6, screen breadth 375px, a total of 750 physical pixels, then 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixels.
When developing applets designer iPhone 6 can be used as a Visual version of the standard.
In other words, designers in the design program, you can do so:
? Directly to the iPhone 6 screen dimension (375x667) is used as a Visual version size 1 PX = 0.5 RPX;
? By 1 PX = 1 RPX standards, set the design size as 750x1334.
Before the designs over to programmers, designers need to clearly describe the design standards of size and unit conversion, so programmers quickly implement interface effects.
If you want to make your little program, both in models of different sizes can be the perfect display, then let it be digested this article.
Com app public awareness programs, micro-signal zxcx0101
让小程序能够适配不同系统平台，
微信是这样做的 - IT资讯
我们都知道，小程序是一个跨系统的平台。这就意味着，小程序会在不同的设备上运行，但不同设备的分辨率会有差异。在小程序中，如何在分辨率不同的设备上保证视觉元素的正常显示？这就需要名为rpx的动态尺寸单位。本期，我们为大家带来小程序rpx单位全解析，希望能够帮助你解决有关rpx的一切疑问。
为什么需要动态单位和rpx？
“在显示屏上，每一个画面都是由无数的点阵形成的。这个点阵中，每一个点叫做像素，就是pixel（缩写为px）。
上面的那句话，对于很多人来说都是常识。
但是，随着Retina屏幕（即“视网膜屏"）的推出和高分屏的普及，1 px所能代表的实际长度并非是一成不变的。
对于跨平台、跨设备的应用来说，单纯使用px并不能满足需要。因为，这很难保证小程序的元素，能在不同设备上正常显示——同样px尺寸的元素，在高分屏上显示会明显要比在低分屏显得更小。
因此，我们需要一个动态的长度单位。这个单位通过对不同屏幕的分辨率进行调整和适配，保证相同元素在不同屏幕上的展示是正常的。
苹果和Google对此都有相应的措施：
? 由于苹果对高分屏的优化良好，所以在iOS上，代码中的1 px所代表的实际像素数会根据不同设备动态调整，开发者不需要进行二次换算。
? 由于Android设备碎片化严重，Google不得不建立了一个新的名叫“density-independent pixel（密度无关像素，缩写为dp）"的尺寸单位，以适应不同分辨率屏幕的尺寸换算。
微信也为小程序提供了一个动态单位解决方案：它就是responsive pixel（动态像素），简称rpx。
Pixel与rpx、dp如何换算呢？
了解动态单位是怎么来的以后，我们下一步就该学习如何在 px 和 rpx、dp 之间进行换算了。
动态单位与 px 换算的基本概念是：选择一个分辨率作为基准，在基准分辨率中，一个像素点显示有多长，在其他屏幕上会显示同样长度。
例如，dp与px换算公式是：dp = px * (目标设备dpi分辨率/ 160)。
但微信小程序的rpx换算方式，会与其他动态单位的换算方法有些出入。微信官方提供的换算方式更“傻瓜"一些：rpx = px * (目标设备宽px值/ 750)。
举个例子：
? 目标设备的宽度如果是375px，按照750rpx进行换算，则等于1rpx = 0.5px
? 目标设备的宽度如果是1125px，换算后1rpx = 1.5px
想想是不是有些不太对劲？没错，如果将微信小程序放到平板电脑上运行，屏幕的宽度 px 值有可能会变化（横竖屏、分屏模式等等）。这时候，再以宽度为基准，就会出现元素显示不正确的问题。
从这一点可以看出，微信团队目前并不希望将小程序扩展到手机以外的设备中。因此，开发者暂时可以专注于提高小程序在手机上的体验，无需担心多尺寸屏幕带来的适配问题。
那能不能直接让 rpx 和 dp 进行互换呢？当然不能！
dp 是以屏幕分辨率为基准的动态单位，而 rpx 是以长度为基准的动态单位。就像“米"和“平方厘米"不能互换一样，dp 和 rpx 两者也是不能直接进行互换的，除非微信官方将 rpx设定为分辨率基准而非长度基准。
设计师该怎么做？
由于微信使用了 rpx 动态单位，设计稿的尺寸单位也推荐使用 rpx。那么问题来了，如果要改用 rpx 单位，以什么尺寸的屏幕作为设计稿标准会比较合适呢？
在微信官方的文档中，我们看到这样一句话：
“在iPhone 6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
开发微信小程序时设计师可以用iPhone 6作为视觉稿的标准。
也就是说，设计师在设计小程序时，可以这样做：
? 直接以iPhone 6的屏幕尺寸（375×667）用作视觉稿尺寸，1 px = 0.5 rpx；
? 以1 px = 1 rpx的标准，将设计稿尺寸设定为750×1334。
在将设计稿转交给程序员之前，设计师需要清楚地描述设计稿尺寸和单位换算标准等，以便程序员快速实现界面效果。
如果想让你的小程序，在不同尺寸的机型上都能够完美显示，那就好好消化这篇文章吧。
本文来自微信公众号 知晓程序，微信号zxcx0101