Layout 用户界面问题：同时设计宽屏和4:3宽高比？

我正在开发一个UI，它需要以不同的纵横比工作，16:9，16:10，4:3

这个想法在概念上很简单：所有的东西都以屏幕为中心，在一个粗略的4:3区域，屏幕这一部分之外的任何东西都有基本的艺术品，所以类似这样：

（未按比例绘制）

其中粉红色区域表示所有UI对象的位置，蓝色区域仅表示背景和效果

诀窍在于可用性，如果我在4:3纵横比环境中传递坐标（0,0），屏幕的左上角就是坐标（0,0）。但是，如果我在一个16:9的环境中（0,0），需要根据新的纵横比进行重整，以使其位于适当的位置。所以我的问题是：我如何才能做到这一点

编辑：为了澄清这基本上是一个UI系统，虽然我列出了上面的4:3、16:9、16:10的比率，但它应该能够动态调整它设置为的任何纵横比的值

---

编辑2：只是为了给情况添加更多细节：当设置的位置传入时，它们作为屏幕当前宽度高度的百分比传入，因此基本上设置位置x将是：[作为屏幕的一部分的位置x]*屏幕宽度，其中屏幕宽度是当前屏幕本身的宽度。

。。。难道你不能想出一个抽象层来隐藏差异吗？一个想法可能是在活动区域周围建立一个“边界”模型，然后添加。对于4:3显示，将边框大小设置为0以使活动区域覆盖整个屏幕。

显而易见的答案似乎是偏移量。由于4x3是16x9，因此您似乎希望16x9屏幕的左右两侧各有2x9个频带。因此，X偏移应为（2/16）*宽度

---

对于16x10屏幕，系数稍微复杂一些：4x3是13.33x10，因此边缘宽度为1.67，X偏移量应为（1.67/16）*宽度=（5/48）*宽度。

您在哪里输入坐标？这是否类似于STB，在配置中有一个16:9或4:3输出的设置？如果是这样的话，你能读懂那个设置，并相应地调整UI，这样我就不会在我漂亮的大显示器中间得到一个恼人的小UI吗？我想我们需要知道你在创建什么级别的UI——它是在HTML级别、UI工具包级别还是在金属上？