如何使具有像素大小的反应应用程序适应不同的屏幕尺寸？

Question

我一直在制作一个带有反应的网站，并且我一直在使用带有 classNames 的 css。 我还关注了一个 figma 文档，其中 figma 屏幕有一定的尺寸，比如说 x 像素 x y 像素。 但是，在其他计算机上，它可能具有更大或更小的像素尺寸（a 像素乘 b 像素）。 我已经将 x x y 像素用于 div 尺寸以及按钮大小等。 因此，当我在其他像素尺寸较大的计算机上打开我的应用程序时，屏幕的一部分只是白色的，它仍然像在较小的屏幕上一样显示网站。 有没有办法解决这个问题，即使我使用了像素值，我的应用也会适应不同大小的屏幕？ 或者，我是否必须返回 go 并将所有内容更改为百分比？

Answer 1

在构建 UI 时，您需要考虑比例。

1- 使用percentage(%)作为宽度，使用aspectRatio作为高度，反之亦然。

container: {
width: "100%",
aspectRatio: 10 / 3, //height will be "30%" of your width
}

2- 将 flex 用于无法完成的工作百分比。 例如，如果您在列表中有任意大小的项目，并且您希望它们共享相同的大小。 为每个人分配flex: 1

3- 使用 EStyleSheet 中的rem而不是像素。 rem是比例因子。 例如，如果您的rem为 2，您的“11rem”将变为“11*2”=“22”。 如果我们使rem与屏幕尺寸成比例，您的 UI 将随任何屏幕尺寸缩放。

//we define rem equals to the entireScreenWidth / 380
const entireScreenWidth = Dimensions.get('window').width;
EStyleSheet.build({$rem: entireScreenWidth / 380});
enter code here
//how to use rem
container: {
width: "100%",
aspectRatio: 10 / 3, //height will be "30%"
padding: "8rem", //it'll scale depend on the screen sizes.
}

4- 对可能超出框的内容使用滚动视图。 例如， TextView

5-每次考虑使用像素时，请考虑在方法 3 中使用rem 。